angular2-routing - Angular 2 Router - 从代码中命名的路由器出口导航

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

出现以下错误：

错误：无法匹配任何路由。URL 段：“详细信息”。

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 ){}