Angular - Child Routing nicht funktioniert

Question

EDIT LÖSUNG:

endete ich mit so etwas wie dies zu navigieren mit bis (die unten etwas von dem Code unterscheidet)

onSelect(menuItem: string): void { 
    this.selectedMenuItem = menuItem; 
    if (menuItem == 'Upload') { 
     this.router.navigateByUrl('/adminhome/(adminhomeviewport:adminupload)'); 
    } 
    else if (menuItem == "Download") { 
     this.router.navigateByUrl('/adminhome/(adminhomeviewport:admindownload)'); 
    } 
    } 

Ich bin nicht sicher warum muss es so gemacht werden, oder warum, wenn es einen anderen Weg gibt, dies zu tun, aber dies gibt mir das erwartete Verhalten.

Ich benutze Angular und ich versuche, einen named Router-Outlet in einer meiner Ansichten zu haben. Leider scheint überhaupt nichts zu funktionieren. Mein Ziel ist es, die Router-Steckdose namens 'admin-viewport' auf der Seite 'http://localhost:4200/adminhome' zu finden, um die 'AdminUploadComponent' und ihre zugehörige Ansicht anzuzeigen.

Ab jetzt die Mutter html, http://localhost:4200/adminhome, die ich erfolgreich wie folgt aussieht navigieren können:

<div class="home-root"> 
    <ul class="home-menu" ng-controller="AdminHomeComponent"> 
    <li *ngFor="let menuString of menuStrings" 
     [class.selected]="menuString === selectedMenuItem" 
     (click)="onSelect(menuString)"> 
     <span class="badge">*</span>{{menuString}} 
    </li> 
    </ul> 
    <router-outlet name="admin-viewport"></router-outlet> 
</div> 

und die Routen in meinem app.module.ts sieht wie folgt aus:

RouterModule.forRoot([ 
{ 
    path: 'adminlogin', 
    component: AdminLoginComponent 
}, 
{ 
    path: 'search', 
    component: SearchQueryComponent 
}, 
{ 
    path: 'adminhome', 
    component: AdminHomeComponent, 
    children : [ 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport' 
    }, 
    ] 
} 

], {EnableTracing: true} )

auf eine Schaltfläche klicken, versuche ich mein Ausgang zu navigieren dies mit Code .:

constructor(private router: Router,public route: ActivatedRoute) { 
    } 

    onSelect(menuItem: string): void { 
    this.selectedMenuItem = menuItem; 
    if(menuItem == 'Upload') 
    { 
     this.router.navigate(['/adminhome/adminupload', {outlet : 'admin-viewport'}]); 
    } 
    } 

Was natürlich den folgenden Fehler führt:

error_handler.ts:1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport' 
Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport' 

Jede Hilfe, wie mein Kind Router-Ausgang navigieren würde sehr geschätzt.

EDIT: Wenn ich meine Routen nach der Implementierung von @ Seejatheran Vorschlag auflisten, funktioniert es immer noch nicht, und ich bekomme dies, wenn ich meine Pfade auflisten.

Answer 1

Sie müssen einen anderen Weg unter Kindern, definieren

{ 
    path: 'adminhome', 
    component: AdminHomeComponent, 
    children : [ 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport' 
    }, 
    { 
     path: 'adminupload', 
     component: AdminUploadComponent, 
     outlet: 'admin-viewport/:type' 
    }, 
    ] 
} 

Answer 2

In Ihrem onSelect Methode versuchen Sie dies:

this.router.navigate([{ outlets: { admin-viewport: ['adminupload'] } }]); 

this helps