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

将无组件路线与子路线在Angular中进行深层链接

1 个答案: