Question

在我看来 group-summary.component.html 我有：

<div class="row">
   <div>
     <app-apple-details *ngIf="isAppleRouteActivated" [someDetails]="detailsToShow" class="col-xs-12 col-md-12"></app-apple-details>
     <app-kiwi-details *ngIf="isKiwiRouteActivated" [someDetails]="detailsToShow" class="col-xs-12 col-md-12"></app-kiwi-details>
   </div>

   <router-outlet></router-outlet>
</div>

您可以看到将显示哪个组件由GroupSummaryComponent中的简单标记确定。

isAppleRouteActivated: boolean = this.router.url.indexOf("/category/apple") > -1;
isKiwiRouteActivated: boolean = this.router.url.indexOf("/category/kiwi") > -1;

IMO这个解决方案并不优雅，我认为这是黑客攻击。

这是我的路线：

export const routes: Routes = [
    ...
    {
        path: "groups/:id/category", component: GroupSummaryComponent, children: [
            { path: "apple", loadChildren: "app/features/apple.module#AppleModule" },
            { path: "kiwi", loadChildren: "app/features/kiwi.module#KiwiModule" }
        ]
    }
];

因为您可以注意到AppleDetailsComponent（app-apple-details）和KiwiDetailsComponent（app-kiwi-details）暂时不在路由中。

问题：

我想知道是否可以ngIf代替<ng-content> GroupSummaryComponent使用groups/:id/category/apple，因此如果用户导航到<ng-content>，那么app-apple-details中将<router-outlet> AppleModule其余的将是相同的，因此在这种情况下，AppleDetailsComponent将加载子级（<ng-content>）。但我不知道如何使用路由将GroupSummaryComponent添加到{ "id": "voctestextension", "description": "voc test extension", "targetTypes": ["User"], "properties": [ { "name": "trainings", "type": "String" } ] }。因为我没有看到任何其他方法来解决这个问题。

我之所以需要这个 - 是因为我希望这个父组件https://graph.microsoft.com/v1.0/users?$filter=contains(extrw7rtbc9_voctestextension/trainings, 'Azure'), $select=extrw7rtbc9_voctestextension,displayName可以重用。对于Apple和Kiwi路线。

Answer 1

ng-content用于在调用组件时向组件添加HTML。这不用于路由。

如果您没有路由组件，为什么要使用路由？只需路由它们，您就不必使用* ngIf或ng-content ...

否则你需要告诉我们你为什么要处理＆＃34;路由＆＃34;像这样，或者为我们提供一个例子，以便我们可以摆弄它。

如何在路由中使用<ng-content>？

1 个答案: