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

Posted 2023-03-07

【中文标题】如何在 Angular 4 中使用路由器 url 通配符？

【英文标题】：How to use router url wildcard in Angular 4?

【发布时间】：2018-07-28 14:34:18

【问题描述】：

我想为每个具有 /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">

感谢任何帮助。

【问题讨论】：

您可以将Child route 用于所有管理路由angular.io/guide/router#child-route-configuration

演示：stackblitz.com/edit/angular-routing-child-routes?file=app/…

【参考方案1】：

你可以写一个方法来检查url是/admin还是以/admin/开头：

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

并在模板中调用它：

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

您可以在this stackblitz 中查看代码。

---

作为替代方案，您可以使用startsWith 字符串方法测试 URL：

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

【讨论】：

感谢您的想法。我正在尝试让您的代码正常工作

谢谢@ConnorsFan 工作就像一个魅力