Angular 2路由器 - 从代码命名路由器出口导航

Question

使用@ angular/router":"3.4.7".

这里提出的解决方案不再适用.

      /**
        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)

(在命名插座中正确显示详细信息组件)

问题

无法弄清楚执行程序导航的正确方法:

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

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

发生以下错误:

错误:无法匹配任何路由.网址细分:'细节'.

Answer 1

你可以像这样以编程方式导航

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

注意:skipLocationChange用于隐藏地址栏中的URL.

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

Answer 2

您可以尝试相对导航为

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

为此，您将必须在组件中注入当前的路由器快照和激活的路由为

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

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