在我看来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 这个解决方案并不优雅，我认为它是 hack。

这是我的路线:

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可重复使用的。苹果和奇异果航线。

最佳答案

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

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

否则你需要告诉我们你为什么要这样处理“路由”，或者给我们提供一个例子，这样我们就可以摆弄它。

关于angular - 如何将 <ng-content> 与路由一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49295430/