Angular 2 动态嵌套路由器插座

Question

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

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

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

您可以通过输入 localhost:4200/users(quick:quick-edit) 来使用它。

现在我的场景是我想将所有用户加载到一个网格上。网格下 会有 3 个小按钮 Edit |快速编辑 |垃圾

当我单击编辑时，它将在新页面上调用编辑。所以使用路由器插座
/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>

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

网址：->

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

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

the quick edit will have no route path