Angular - 事件绑定
问题描述:
这是一个Bootstrap面板。如果用户点击图标,隐藏的部分变得不隐藏,但我需要的是只隐藏那个被点击的部分。Angular - 事件绑定
@Component({
template: `
<div class="panel panel-default">
<div class="panel-heading" *ngFor="let fizz of fizzes">
<div class="row">
<div class="col-md-2">
<i class="glyphicon {{ fizz.iconClass }}"></i>
</div>
<div class="col-md-8">
{{ fizz.heading }}
</div>
<div class="col-md-2">
<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick()"></i>
</div>
</div>
</div>
<div class="panel-body" [hidden]="!clicked">
{{ fizz.content }}
</div>
</div>
`
})
export class FizzComponent {
fizzes: object[];
clicked = false;
onClick(event: any) {
this.clicked = !this.clicked;
}
}
我可以通过定义自己的每一个动作实现它,但我要如何做一个更通用的方法?
试图通过$event
,就像这样:
<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick($event)"></i>
而且
onClick(event: any) {
event.target.clicked = !event.target.clicked;
}
,但没有任何运气..
答
如果你正在寻找一个通用的,可重复使用的解决方案,只需写一条指令去做你所要求的。然后,您只需在适当的模块中声明它并将其添加到元素中即可。
@Directive({
selector: '[appHideOnClick]'
})
export class HideOnClickDirective {
@HostListener('click') onClick() {
// toggle hidden on clicked
this.isHidden = !this.isHidden;
}
@HostBinding('hidden') isHidden = false; // initialize without hidden attribute
constructor() {}
}
然后在您的标记:
<div class="panel-body" appHideOnClick >
请记住,没有角的每一个元素都有与它相连的hidden
属性的造型。您可能需要更改该指令适用display: none
的元素风格,还是坚持一个全球性的规则来进行hidden
属性在styles.css/styles.scss
:
[hidden] {
display: none; // may need to be !important
}
这是一种很难理解你的要求。你可以创建一个Plunker来演示吗?或者也许添加一个图像来显示行为? – Askanison4
是点击事件触发你检查控制台日志 – CharanRoot
@Jonnysa - 是的,它确实。绝对检查 –