角 - 兒童路由不工作

-1

我最後不得不使用這樣的事情（從下面的代碼略有不同）

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，我試圖在我的某個視圖中使用命名的router-outlet。不幸的是，似乎沒有任何工作。我的目標是讓'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'

如何導航我的孩子路由器出口任何幫助將不勝感激。

編輯：當我實施@ Seejatheran的建議後列出我的路線，它仍然無法正常工作，當我列出我的路徑時，我得到這個。

來源

2017-07-08 Black Dynamite

您需要定義以下兒童另一條路徑，

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

來源

2017-07-08 03:13:13 Sajeetharan

在你ONSELECT方法試試這個：

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

希望這有助於

來源

2017-07-08 05:16:41 brijmcq

角 - 兒童路由不工作

回答

相關問題