アンギュラ - 子供のルーティング機能していない

Question

EDITソリューション：

は、私はよく分からない（以下のコードは少し異なり）、このような何か

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)'); 
    } 
    } 

を使用してナビゲートするためになってしまいましたどうしてこのようにしなければならないのか、それとも別の方法があれば、これが私に期待される行動を与えるのです。

私はAngularを使用しています。私は自分のビューの1つに名前付きのルータ出力口を持つようにしています。残念ながら、何も動作していないようです。私の目標は、 'http://localhost:4200/adminhome'ページにある 'admin-viewport'という名前のルータアウトレットを取得して 'AdminUploadComponent'とそれに関連するビューを表示することです。今のよう

、私は正常にこのようなルックスにナビゲートすることができ、親HTML、http://localhost:4200/adminhome、：

<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> 

そして、私のapp.module.ts内のルートは、次のようになります

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

]、 {enableTracing：真} ）

ボタンクリックで、私はこれを使用して、私の口を移動しようとするとコード：もちろん、次のエラーがスローされます

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'}]); 
    } 
    } 

：私の子ルータ・コンセントをナビゲートする方法上の任意の助けをいただければ幸いです

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' 

。

EDIT：@ Seejatheranの提案を実装した後で私のルートをリストアップしても、それはまだ機能しません。パスをリストすると、これが表示されます。あなたにonSelect方法で

Answer 1

あなたは子供の下に別のパスを定義する必要が

、

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

Answer 2

これを試してみてください。

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

が、これは

を役に立てば幸い