Question

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

$（＆＃34; .target＆＃34;）。toggle（）;

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

我如何在Angular中执行此操作？

Answer 1

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

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

在你的模板中：

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

在您的组件

中

class MyComponent {
  visible: boolean = true;

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

Answer 2

在你的组件中定义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);
}

angular2 toggle DOM元素

2 个答案: