Question

我使用以下标记将点击的组件标记为有效。

<div *ngFor="let menu of menus;"
     (click)="onClick($event,menu.link)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

处理点击的方法如下。

onClick(target, link) {
  target.active = !target.active;
  this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}

似乎target.active的值从undefined到true到false到true等等。但是风格没有设定。（我将整个组件打印到控制台，无法看到添加类名称。）

问题：我在这种方法中缺少什么？

注意，我知道如何通过从不同的角度接近它来解决它。我设置了一个保持索引并将其设置为like shown here的局部变量。我的问题的目的是学会以更加坦率的方式实现所要求的行为。

Answer 1

target此处：

onClick(target, link) {
  target.active = !target.active;   <------------
  this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}

没有引用menu，它指的是事件。但是基于你的ngClass指令：

[ngClass]="{'active':menu.active}">

您需要将active设置为menu变量，因此可以这样做：

<div *ngFor="let menu of menus;"
     (click)="onClick(menu,menu.link)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

Answer 2

不是传入$ event，而是发送实际的菜单对象。像这样：

<div *ngFor="let menu of menus;"
     (click)="onClick(menu)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

在组件中：

onClick(menu) {
  menu.active = !menu.active;
  this.router.navigate([{ outlets: { primary: [""], menus: [menu.link] } }]);
}