将无组件路径与子路径以角线深度链接

Question

如果有孩子，有没有机会在无组件路由内进行深层链接？从这里开始：

路由器模块：

@NgModule({
  declarations: [ 
    CatalogComponent, ProductComponent, PictureComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'catalog', component: CatalogComponent, 
        children :[
            { path: '', component: ProductComponent, outlet: "product"}, 
            { path: '', component: PictureComponent, outlet: "picture"}
        ]
      }
    ])
  ],
  exports: [
    RouterModule,
  ]
})
export class AppRoutingModule {}

目录组件模板

<div>Catalog
   <router-outlet name="product"></router-outlet>
   <router-outlet name="picture"></router-outlet>
</div>

此处实现的是，导航到/ catalog时会并行加载2个组件。这有效！

但是知道我想像这样用子路由来推进这种无组件的路由：

@NgModule({
  declarations: [ 
    CatalogComponent, ProductComponent, PictureComponent, ItemComponent, StackComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'catalog', component: CatalogComponent, 
        children :[
            { path: '', component: ProductComponent, outlet:"product", 
              children :[
                     { path: 'x', component: ItemComponent}
              ]
            },
            { path: '', component: PictureComponent, outlet: "picture",
              children :[
                     { path: 'y', component: StackComponent}
              ]
            }
        ]}
    ])
  ],
  exports: [
    RouterModule,
  ]
})
export class AppRoutingModule {}

我希望实现此组件结构：

CatalogComponent -> ProductComponent
                                    -> ItemComponent
                 -> PictureComponent
                                    -> StackComponent

而ProductComponent和PictureComponent是并行呈现的，而ItemComponent / StackComponent的行为取决于URL的XOR：

URL: catalog/x

CatalogComponent -> ProductComponent
                                    -> ItemComponent
                 -> PictureComponent

URL: catalog/y

CatalogComponent -> ProductComponent

                 -> PictureComponent
                                    -> StackComponent

因此，使用多个无路径路由是一种在同一页面上并行加载多个组件的方法，一种辅助路由。但是，当涉及到深层链接时，它似乎根本不起作用。 Angular完全可能吗？

Answer 1

检查我根据您的要求进行的Stackblitz：https://stackblitz.com/edit/angular-m7cc21

技巧是将'x'或'y'作为'catalog/:id'路径的参数传递：

const appRoutes: Routes = [
  {
    path: "catalog/:id",
    component: CatalogComponent,
    children: [
      {
        path: "",
        component: ProductComponent,
        outlet: "product",
        children: [{ path: "", component: ItemComponent, outlet: "x" }]
      },
      {
        path: "",
        component: PictureComponent,
        outlet: "picture",
        children: [{ path: "", component: StackComponent, outlet: "y" }]
      }
    ]
  },
];

然后显示Product和PictureComponent的<router-outlet name'x'>中的各个子组件：

template: `<h1>ProductComponent</h1>
    <router-outlet *ngIf="id==='x'" name='x'></router-outlet>  
  `

为了检测'：id'参数（x或y）何时更改，您必须在paramMap和product.component.ts中订阅路由的picture.component.ts：

    this.route.paramMap.subscribe(
      (params: ParamMap) => {
        this.id = params.get('id');
        console.log(this.id);
    });