使用 Angular 中的 Child 路由深度链接无组件路由

Question

如果有 children，是否有机会在无组件路由中进行深度链接？从这里开始：

Router-Module:

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

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

使用 Angular 中的 Child 路由深度链接无组件路由

Deeplinking Componentless Routes With Child Routes in Angular

angular

routing