Angular2 Router: Fehler: Primäre Steckdose zum Laden von "InboxComponent" nicht gefunden

Question

Ich habe eine einfache App mit Routing erstellt. -Links "http: // localhost: 4200" und "http: // localhost: 4200/mail" gut funktionieren,

aber wenn ich versuche, einen Link "http zu öffnen: // localhost: 4200/mail/inbox "Ich erhalte eine Fehlermeldung:" Kann 'Primary outlet' nicht finden, um 'InboxComponent' zu laden. "

Was verursacht den Fehler und wie kann ich es beheben?

Hier sind meine * .ts Dateien:

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() { } 

} 

Mail-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() { 
    } 

} 

Answer 1

Ihre MailListComponent braucht eine <router-outlet> auch, weil InboxComponent definiert ist als Kind in Ihrer Routerkonfiguration:

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

    constructor() { } 

} 

Wenn Sie jedoch die InboxComponent innerhalb derselben Steckdose machen möchten, können Sie es als Kind nicht hinzufügen sollten

Answer 2

Ein anderer Weg, wenn Sie das Hinzufügen einer <router-outlet></router-outlet> vermeiden möchten, ist die Art und Weise definieren Sie Ihre Routen in sich ändern die folgenden:

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

Dies ermöglicht Ihnen, die gleiche <router-outlet></router-outlet> wie oben zu verwenden, um die neue Komponente