如何改变父元素的类与不同的形式与angular2+或css?

Question

我有一个元素列表，有标题，正文和显示正文的复选框，如accordion:

<form class="search-box" [ngClass]="{'classname' : condition}">
<input
(click)="addClasstoBody"
type="checkbox"
name="showBody"
/>
<header>
<span class="body">
Body
</span>
</header> </div>
<div class="search-box" [ngClass]="{'classname' : condition}">
<input
(click)="addClasstoBody"
type="checkbox"
name="showBody"
/>
<header>
<span class="body">
Body
</span>
</header></form>

通过将类添加到所有组件中，可以轻松地设置为true。

我可以使用form.checkbox.checked吗?

Answer 1

我编辑了答案

创建elementRef并绑定到你的HTML元素然后传递elementRef onClick进行进一步操作

编辑component.ts

...
@ViewChild('container1') container1: ElementRef;
@ViewChild('container2') container2: ElementRef;
....
addClasstoBody(containerModel: HTMLElement, event){
var targetContainer = event.target;
var isChecked = targetContainer.checked;
console.dir(isChecked)
console.dir(containerModel)
console.dir(event)
if(isChecked){
containerModel.classList.add("show");
}else{
containerModel.classList.remove("show");
}
}

编辑component.html

<form class="search-box">
<div [ngClass]="{'classname' : true}" #container1>
<input
(click)="addClasstoBody(container1, $event)"
type="checkbox"
name="showBody"
[(ngModel)]="container1.isCheck"
>
<header>
<span class="body">
Body1
</span>
</header>
</div>
<div class="search-box" [ngClass]="{'classname' : true}" #container2>
<input
(click)="addClasstoBody(container2, $event)"
type="checkbox"
name="showBody"
[(ngModel)]="container2.isCheck"
>
<header>
<span class="body">
Body2
</span>
</header>
</div>
</form>

你也可以在html中做所有的事情，删除addClasstoBody函数，但编辑你的容器如下

<div [ngClass]="{'classname' : container1.isCheck}" #container1>