Question

在我的模板中，我有此导航检查ngIf router.url为=到当前URL，我想在导航中显示其他链接。

问题是我不怎么可能以我尝试的方式执行此操作。如何正确编写语法，以便可以在模板中获取此动态ID。我尝试了很多方法：

                     like so -   '/csgo/match/${id}'
                                 '/csgo/match/id'  
                                 '/csgo/match/:id'

<ng-template [ngIf]="router.url === '/csgo/match/${id}'">
<a class="nav-item nav-link" routerLink="csgo/results">Results</a>
<a class="nav-item nav-link" routerLink="csgo/ranking">World Ranking</a>
<a class="nav-item nav-link" routerLink="csgo/upcoming">Upcoming</a>
</ng-template>

路由模块

  { path: '', component: HomeRouterComponent },
  { path: 'csgo', component: CsgoComponent},
  { path: 'csgo/results', component: CsResultsComponent},
  { path: 'csgo/ranking', component: RankingComponent},
  { path: 'csgo/match/:id', component:MatchComponent},
  { path: 'csgo/team/:id', component: TeamPageComponent},
  { path: 'csgo/upcoming', component:UpcomingLiveComponent},

Answer 1

您的模板* ng如果条件应如下所示： $ {id}应该在引号后。

<ng-template [ngIf]="router.url === '/csgo/match/'${id)">

Answer 2

[ngIf]="router.url === '/csgo/match/' +id"

Answer 3

<ng-template *ngIf="showRoutes">
<a class="nav-item nav-link" routerLink="csgo/results">Results</a>
<a class="nav-item nav-link" routerLink="csgo/ranking">World Ranking</a>
<a class="nav-item nav-link" routerLink="csgo/upcoming">Upcoming</a>
</ng-template>

在您的.ts中，

import {ActivatedRoute} from '@angular/router';

constructor(private _route : ActivatedRoute){}

订阅您的路线参数：

this._route.paramMap.subscribe((params)=>{
 //change the value of showRoutes based on your requirements
});

Angular router.url-传递ID

3 个答案: