Angular 2 个动态嵌套路由器插座

Question

我有一个场景，我必须复制快速编辑在 wordpress 上的工作方式。

根据我的理解，您可以像这样在路由器插座上进行操作

<div>
    <router-outlet></router-outlet>
    <router-outlet name="quick"></router-outlet>
</div>

您可以通过输入 localhost:4200/users(quick:quick-edit).

来使用它

现在我的方案是我想在一个网格上加载所有用户。网格下会有3个小按钮编辑 |快速编辑 |垃圾桶

当我单击“编辑”时，它将在新页面上调用编辑。所以使用路由器插座
/router-outlet 只能正常工作，但是如果我单击“快速编辑” 它仍然会在网格中显示用户并将所选行更改为快速编辑表单。基于那种情况，它应该是这样的

<router-outlet>
     <table>
         <tr>

         </tr>
         <router-outlet name="quick"></router-outlet>
     </table> <!-- It will be loaded once quick edit is pressed -->
</router-outlet>

不过好像不行？有什么想法或变通办法让它发挥作用吗？

Answer 1

当编辑和快速编辑相同时，您无需在 table 组件内使用单独的路由器。但是您可以将其处理为

主路由器插座

<router-outlet></router-outlet>

table 组件应为

<table>
    <tr *ngFor="let user of users"></tr>
    <quick-edit-component *ngIf="user.quickEdit" [user]="user"> </quick-edit-component>
</table>

可以使用 url 路由完成编辑。

URL : ->

localhost:2000/users              ------------users table view

localhost:2000/users/edit/:id     ------------users full edit view

the quick edit will have no route path

Angular 2 个动态嵌套路由器插座

Angular 2 dynamic nested router outlets

angular2-routing

angular