角2路由器命名路由器出口从代码

使用@角/路由器导航3.4.7“角2路由器命名路由器出口从代码

建议的解决方案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' } }]);

以下错误：

错误：无法匹配任何路线。网址细分：'详情'。

来源

2017-06-13 Mandark

您可以尝试相对导航的

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

为此，您将不得不注入的电流分量路由器快照和激活途径为

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

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

来源

2017-06-13 10:24:13

不，仍然得到错误：无法匹配任何路线 – Mandark

您可以编程导航这样

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

注意：skipLocationChange用于隐藏地址栏中的url。

请参考官方文档：https://angular.io/guide/router

来源

2017-06-16 14:35:27 senthil

角2路由器命名路由器出口从代码

回答

相关问题