在基于router的ngFor循环中为一个元素添加一个类.url匹配Angular

Question

这是一个进度时间轴，其中class="如果用户在当前章节，则需要更改。如果id与当前的router.url匹配，我需要向bar类添加一个活动类。

下面是标记。

<div class="progress-container" >
<div [id]="chapter.slug" class="bar" [class.active]="active" [routerLink]="'/'+ chapter.slug" *ngFor="let chapter of chapters; let i = index;">
<div class="fill"></div>
<p>{{i + 1}}</p>
<div class="question-dots">
<a href="" [routerLink]="'/'+chapter.slug+'/'+question.slug" *ngFor="let question of questions"></a>
</div>
</div>
</div>

在我的组件中。我使用下面的if语句将active设置为true:

for(let i = 0; i < this.chapters.length; ++i)
{
console.log(this.router.url.indexOf(this.chapters[i].slug) > -1);
if(this.router.url.indexOf(this.chapters[i].slug) > -1){
this.active = true;
}
}

但是，这会将活动类添加到for循环中的所有元素中。如何将类添加到与路由器url匹配的1个元素中?

Answer 1

您可以使用[ngClass]="getBarClass(i)"设置class，其中getBarClass是组件中的一个函数，它接受索引并返回基于索引的['bar']或['bar', 'bar-active']类列表。然后你可以应用任何你需要额外的bar-active类。

查看NgClass文档

Answer 2

ngClass是在模板中动态设置类的正确方法。然而，不鼓励在模板中使用方法，因为每当组件更新时，这些方法都会在每个循环中重新求值。

如果可以的话，更有效的方法是将计算值存储在chapter对象中。

for(let i = 0; i < this.chapters.length; ++i) {
if(this.router.url.indexOf(this.chapters[i].slug) > -1){
this.chapters[i].active = true;
}
}

然后在你的模板中，你可以使用ngClass来查询章节的这个属性

<div class="progress-container">
<div 
[id]="chapter.slug" 
class="bar" 
[ngClass]="{'active': chapter.active}" 
[routerLink]="'/'+ chapter.slug" 
*ngFor="let chapter of chapters; let i = index;"
>
<div class="fill"></div>
<p>{{i + 1}}</p>
<div class="question-dots">
<a href="" [routerLink]="'/'+chapter.slug+'/'+question.slug" *ngFor="let question of questions"></a>
</div>
</div>
</div>

NgClass可以以多种方式使用，但我在这里测试它。active为真，如果为真，我将active类添加到该潜水。

进一步阅读:NgClass Angular Documentation