angular2 toggle DOM元素

Question

我正在开展Angular项目。如何切换像jQuery这样的DOM元素：

$（“。target”）。toggle（）;

我的目标是在单击父级时隐藏子元素的内容

我怎么能在Angular中做到这一点？

Answer 1

在您的组件中定义visible作为boolean数组。

let visible: Array<boolean> = [];

并将切换功能定义为：

Toggle(i) {
    this.visible[i] = !this.visible[i];
}   

并在HTML中

<ul class="nav nav-list" *ngFor=" let compte of comptes; let i=index" (click)="Toggle(i)">
    <li class="active" *ngIf="visible[i]" >{{compte}}</li>
</ul>

此外，将值推送到可见数组，您将获得comptes的值。

for (let compte of comptes) {
    this.visible.push(true);
}

Answer 2

请不要操纵组件中的DOM。决不。这将是许多问题的根源。

由于绑定和更改检测，您的模板只能由Angular更新。为此，使用变量来维护元素的可见性状态。

在您的模板中：

<div [hidden]="!visible">
  Lorem ipsum...
</div>
<button (click)="toggle()">Toggle</button>

在您的组件中

class MyComponent {
  visible: boolean = true;

  toggle() {
    this.visible = !this.visible;
  }
}