Angular ngIf 路由器有 /id（/a 动态数字）答案

【问题标题】：Angular ngIf router has /id ( /a dynamic number )Angular ngIf 路由器有 /id（/a 动态数字）
【发布时间】：2019-11-29 14:51:28
【问题描述】：

我在 main.ts 中创建了这个，它获取了路由 url：

router: string;

constructor(private _router: Router) { 
    this.router = _router.url; 
}

这很好用。然后在main.html中：

<app-main-menu *ngIf="router == '/'"></app-main-menu>
<app-item-list *ngIf="router == '/list'"></app-item-list>

<app-item-info *ngIf="router == '/:id'"></app-item-info> <!-- THIS DOES NOT WORK -->

当路线是 /2 或 /35（或任何数字）时，我无法让 app-item-info ngIf 工作。

我的问题是，当我总是有一个带有动态数字“345”的字符串“/”时，如何将 *ngIf 设置为显示（true）？

示例：当 URL（路由为）：localhost:4200/2 时，ngIf 应显示 app-item-info。

编辑：我不能使用<router-outlet>，因为我将它用于不同的事情。显示页面。

【问题讨论】：

问题是您将router 值与字符串'/:id' 进行比较，这就是它不起作用的原因。此外，这种方法看起来是一种非常糟糕的做法，请尝试重构您的代码并正确使用角度路由。
我同意@igor_c。这似乎不是最好的方法。如果您想获取路由参数，您可能需要查看stackoverflow.com/questions/40560399/…
这能回答你的问题吗？ Subscribing to route params and data in Angular 2
你知道你可以拥有多个<router-outlet>s吗？ stackoverflow.com/questions/38038001/…

标签： angular

【解决方案1】：

我推荐使用<router-outlet> 来实现这个功能。查看有关路由的官方 Angular 文档： https://angular.io/guide/router

现场示例：https://stackblitz.com/angular/aqqyljyojye

【讨论】：

我知道这一点。但我正在将路由器插座用于其他用途。我必须这样做。
那么请使用此信息更新您的帖子。

【解决方案2】：

这对你有帮助吗？

<app-item-info *ngIf="isItemInfoRoute(router)"></app-item-info>

在.ts中

isItemInfoRoute(router: string) {
   return router.search(/^\/\d+/) > -1
}

【讨论】：