Angular 2动态嵌套路由器插座

Question

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

根据我的理解，你可以在路由器插座上做这个

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

您可以通过输入localhost：4200 / users（快速：快速编辑）来使用它。

现在我的方案是我想加载网格上的所有用户。在网格下 将有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

当编辑和快速编辑两者相同时，您不需要在表组件内使用单独的路由器。但你可以把它作为

来处理

主路由器插座

<router-outlet></router-outlet>

表组件应为

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

可以使用网址路由完整的编辑。

网址： - ＆gt;

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

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

the quick edit will have no route path