如何在 Angular 4 中使用路由器 url 通配符？

Question

我想为每个具有/admin 的路由或具有这些类型的 urls /admin/dashboard 、 /admin/users 、 /admin/tasks等的路由显示我的标头组件

应用程序组件.html

<div id="page-wrap" class="inner-page {{router.url}}" *ngIf="router.url === '/admin'; else templateName">

  <app-header></app-header>

  <div class="page-content-wrap">

    <app-sidebar></app-sidebar>

    <div class="content-wrap panel-right">
        <router-outlet></router-outlet>
    </div>

  </div>

</div>

<ng-template #templateName>

  <div class="inner-page {{router.url}}">

    <div class="container">
        <flash-messages></flash-messages>
        <router-outlet></router-outlet>
    </div>

  </div>

</ng-template>

但是上面的代码只接受/admin。您知道如何添加通配符以使其接受具有 /admin/tasks, /admin/users 的路由吗？

这是需要改善的条件：

<div id="page-wrap" class="inner-page {{router.url}}" *ngIf="router.url === '/admin'; else templateName">

任何帮助表示赞赏。

Answer 1

您可以编写一个方法来检查 url 是否以/admin或开头/admin/：

isAdminRoute(value: string): boolean {
  return /^\/admin(\/|$)/.test(value);
}

并在模板中调用它：

<div *ngIf="isAdminRoute(router.url); else templateName" ...>

您可以在此 stackblitz 中查看工作中的代码。

作为替代方案，您可以使用startsWithstring 方法测试 URL ：

<div *ngIf="route.url === '/admin' || route.url.startsWith('/admin/'); else templateName" ... >