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

Question

我想為每個具有/ admin的路由或具有此類URL / admin / dashboard，/ admin / users，/ admin / tasks等的路由顯示我的標頭組件

app.component.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中查看正在工作的代碼。

---

或者，您可以使用startsWith字符串方法測試URL：

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