我正在尝试基于单击事件将类应用于 HTML 元素。从父组件的模板中为子组件的选择器设置类属性时,这可以正常工作,如父组件的以下片段所示:
[class.bordered]='isSelected(item)'
这将在单击该项目时适当地设置样式。但是,我想基于相同的点击事件在子组件中设置一个内部 HTML 元素的类,这是子组件样式的所需目标:
template: `
<div class="This is where I really want to apply the style">
{{ item.val }}
</div>
`
有没有一种容易支持的方法?或者这被认为是一种不好的做法,我应该设计我的组件以避免这种有条件的样式情况?
完整代码:
@Component({
selector: 'parent-component',
directives: [ChildComponent],
template: `
<child-component
*ngFor='#item of items'
[item]='item'
(click)='clicked(item)'
[class.bordered]='isSelected(item)'>
</child-component>
`
})
export class ParentComponent {
items: Item[];
currentItem: item;
constructor(private i: ItemService) {
this.items = i.items;
}
clicked(item: Item): void {
this.currentItem = item;
}
isSelected(item: Items): boolean {
if (!item || !this.currentItem) {
return false;
}
return item.val === this.currentItem.val;
}
}
@Component({
selector: 'child-component',
inputs: ['item'],
template: `
<div class="This is where I really want to apply the style">
{{ item.val }}
</div>
`
})
export class ChildComponent {}