在Angular中使用子路由深度链接组件较少的路由

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：

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）何时更改，您必须在 product.component.ts 和 picture.component.ts 中订阅路由的 paramMap：

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