typescript Angular2 路由器：错误：无法找到加载“InboxComponent”的主要出口

Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'

提问by Zurab-D

I created a simple app with routing. Links "http:// localhost:4200" and "http:// localhost:4200/mail" work well,

我创建了一个带有路由的简单应用程序。链接“ http:// localhost:4200”和“ http:// localhost:4200/mail”运行良好，

but when I try to open a link "http:// localhost:4200/mail/inbox" I get an error: "Cannot find primary outlet to load 'InboxComponent'".

但是当我尝试打开一个链接“ http:// localhost:4200/mail/inbox”时，我收到一个错误：“找不到主插座来加载‘InboxComponent’”。

What causes the error and how can I fix it?

导致错误的原因是什么，我该如何解决？

Here are my *.ts files:

这是我的 *.ts 文件：

app.module.ts:

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { MailListComponent } from './components/mail-list/mail-list.component';
import { FoldersComponent } from './components/folders/folders.component';
import { InboxComponent } from './components/inbox/inbox.component';

const routes = [
  { path: '',
    component: MailListComponent
   },

  { path: 'mail', component: MailListComponent,
      children: [
        {path: 'inbox', component: InboxComponent}
      ]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    MailListComponent,
    FoldersComponent,
    InboxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-folders></app-folders>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

folders.component.ts:

folders.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-folders',
  template: `
    <aside class="folders">
      <ul>
        <li><a routerLink="mail/inbox">Inbox</a></li>
      </ul>
    </aside>
  `,
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent {
  folders: any[];

  constructor() { }

}

mail-list.component.ts:

邮件列表.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-mail-list',
  template: `
    <p>
      Mail list works!
    </p>
  `,
  styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {

  constructor() { }

}

inbox.component.ts:

收件箱.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-inbox',
  template: `
    <p>
      inbox works!
    </p>
  `,
  styleUrls: ['./inbox.component.css']
})
export class InboxComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

回答by Poul Kruijt

Your MailListComponentneeds a <router-outlet>as well, because InboxComponentis defined as a child in your router configuration:

您也MailListComponent需要 a <router-outlet>，因为InboxComponent在您的路由器配置中定义为子项：

@Component({
  selector: 'app-mail-list',
  template: `
    <p>
      Mail list works!
    </p>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {

  constructor() { }

}

If you however want to render the InboxComponentinside the same outlet, you should not add it as a child

但是，如果您想将InboxComponent内部渲染到同一个出口，则不应将其添加为子项

回答by hasanain

Another way if you want to avoid adding a <router-outlet></router-outlet>is to change the way you define your routes into the following:

如果您想避免添加 a，另一种方法<router-outlet></router-outlet>是将您定义路由的方式更改为以下内容：

const routes = [
  { path: '',
    children: [
      {
        path: '',
        component: MailListComponent
      }
    ]
  },
  { path: 'mail', 
    children: [
      {
        path: '',
        component: MailListComponent
      },
      {
        path: 'inbox', 
        component: InboxComponent
      }
    ]
  }
];

This will allow you to use the same <router-outlet></router-outlet>as above to host the new component

这将允许您使用与<router-outlet></router-outlet>上面相同的内容来托管新组件