角2路由器命名路由器出口從代碼

Question

使用@角/路由器導航3.4.7「

建議的解決方案here不工作了

 /** 
     The ProductComponent depending on the url displays one of two info 
     components rendered in a named outlet called 'productOutlet'. 
     */ 
     @Component({ 
      selector: 'product', 
      template: 
      ` <router-outlet></router-outlet> 
      <router-outlet name="productOutlet"></router-outlet> 
      ` 
     }) 
     export class ProductComponent{ 
     } 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
      { 
      path: 'product', 
      component: ProductComponent, 
      children: [ 
       { 
       path: '', 
       component: ProductOverviewComponent, 
       outlet: 'productOutlet'}, 
       { 
       path: 'details', 
       component: ProductDetailsComponent, 
       outlet: 'productOutlet' } 
      ] 
      } 
     ] 

    )], 
    declarations: [ 
    ProductComponent, 
    ProductHeaderComponent, 
    ProductOverviewComponent, 
    ProductDetailsComponent 
    exports: [ 
    ProductComponent, 
    ProductHeaderComponent, 
    ProductOverviewComponent, 
    ProductDetailsComponent 
    ] 
}) 
export class ProductModule { 

} 

。手動導航按預期工作

http://localhost:5000/app/build/#/product-module/product（正確顯示概覽組件在指定插座中）

http://localhost:5000/app/build/#/product-module/product/(productOutlet:details) 

（正確地顯示細節部分在名爲插座）

的問題

無法找出正確的方式進行programatical導航：發生

this.router.navigateByUrl('/(productOutlet:details)'); 

this.router.navigate(['', { outlets: { productOutlet: 'details' } }]); 

以下錯誤：

錯誤：無法匹配任何路線。網址細分：'詳情'。

Answer 1

您可以嘗試相對導航的

this.router.navigate(['new'],{relativeTo:this.route}) 

爲此，您將不得不注入的電流分量路由器快照和激活途徑爲

import { Router,ActivatedRoute } from "@angular/router"; 

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

Answer 2

您可以編程導航這樣

this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }], { skipLocationChange: true }); 

注意：skipLocationChange用於隱藏地址欄中的url。

請參考官方文檔：https://angular.io/guide/router