Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'
Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'
我创建了一个带路由的简单应用程序。
链接“http://localhost:4200”和“http://localhost:4200/mail”运行良好,
但是当我尝试打开 link "http:// localhost:4200/mail/inbox" 时,我得到一个错误:"Cannot find primary outlet to load 'InboxComponent'".
导致错误的原因是什么,我该如何解决?
这是我的 *.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 :
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 :
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() { }
}
邮件-list.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 :
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() {
}
}
您的 MailListComponent
也需要 <router-outlet>
,因为 InboxComponent
在您的路由器配置中被定义为 child:
@Component({
selector: 'app-mail-list',
template: `
<p>
Mail list works!
</p>
<router-outlet></router-outlet>
`,
styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {
constructor() { }
}
但是,如果您想在同一个插座内呈现 InboxComponent
,则不应将其添加为 child
如果您想避免添加 <router-outlet></router-outlet>
的另一种方法是将您定义路线的方式更改为以下内容:
const routes = [
{ path: '',
children: [
{
path: '',
component: MailListComponent
}
]
},
{ path: 'mail',
children: [
{
path: '',
component: MailListComponent
},
{
path: 'inbox',
component: InboxComponent
}
]
}
];
这将允许您使用与上面相同的 <router-outlet></router-outlet>
来托管新组件
我创建了一个带路由的简单应用程序。 链接“http://localhost:4200”和“http://localhost:4200/mail”运行良好,
但是当我尝试打开 link "http:// localhost:4200/mail/inbox" 时,我得到一个错误:"Cannot find primary outlet to load 'InboxComponent'".
导致错误的原因是什么,我该如何解决?
这是我的 *.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 :
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 :
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() { }
}
邮件-list.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 :
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() {
}
}
您的 MailListComponent
也需要 <router-outlet>
,因为 InboxComponent
在您的路由器配置中被定义为 child:
@Component({
selector: 'app-mail-list',
template: `
<p>
Mail list works!
</p>
<router-outlet></router-outlet>
`,
styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {
constructor() { }
}
但是,如果您想在同一个插座内呈现 InboxComponent
,则不应将其添加为 child
如果您想避免添加 <router-outlet></router-outlet>
的另一种方法是将您定义路线的方式更改为以下内容:
const routes = [
{ path: '',
children: [
{
path: '',
component: MailListComponent
}
]
},
{ path: 'mail',
children: [
{
path: '',
component: MailListComponent
},
{
path: 'inbox',
component: InboxComponent
}
]
}
];
这将允许您使用与上面相同的 <router-outlet></router-outlet>
来托管新组件