Angular 2 Router - 从代码命名的路由器出口导航 [英] Angular 2 Router - named router-outlet navigation from code

问题描述

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

Using @angular/router": "3.4.7".

提议的解决方案此处不再适用.

Proposed solution here doesn't work anymore.

      /**
        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 (correctly displays overview component in named outlet)

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

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

(correctly displays details component in named outlet)

问题

无法找出执行程序导航的正确方法:

Cannot figure out the correct way to perform programatical navigation:

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

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

出现以下错误:

错误:无法匹配任何路由.URL 段:详细信息".

Error: Cannot match any routes. URL Segment: 'details'.

推荐答案

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

You can navigate programatically like this

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

注意:skipLocationChange 用于在地址栏中隐藏 url.

Note: skipLocationChange is use to hide the url from the address bar.

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

这篇关于Angular 2 Router - 从代码命名的路由器出口导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！