Question

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

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

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

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

IMO这个解决方案并不优雅，我认为这是黑客攻击。更有经验的人可以向我提出不同的解决方案吗？我试图使用命名插座虽然它对我不起作用，特别是我不知道如何通过someDetails

这是我的路线：

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

Answer 1

您还可以使用CanActivate后卫重定向到正确的路线。

实施CanActivate：

canActivate(): boolean {
        const isRoute1 = // here your test if this route must be used;
        if (!isRoute1) {
            this._router.navigate(['/route2']); // if not redirect to the other route
        }
        return isRoute1;
}

在路线声明中使用你的守卫：

{
        path: '/route1',
        canActivate: [YourCanActivateGuard],
        component: YourComponent
}

第二条路线也一样。

如何在Angular 5中基于URL显示特定组件？

1 个答案: