Angular 角度2-将条件样式应用于指令'；s子HTML元素

我正在尝试基于单击事件将类应用于HTML元素。当从父组件的模板中为子组件的选择器设置class属性时，这可以正常工作，如父组件的以下代码段所示：

[class.bordered]='isSelected（项目）'

这将在单击该项目时适当设置样式。但是，我想基于相同类型的单击事件在子组件中设置内部HTML元素的类，下面是子组件样式所需的目标：

模板：`
{{item.val}}
`

有没有一种方法可以轻松实现这一点？或者这被认为是一种不好的做法，我应该设计我的组件以避免这种有条件的样式化情况

完整代码：

@组件({
选择器：“父组件”，
指令：[ChildComponent]，
模板：`
`
})
导出类ParentComponent{
项目：项目[]；
当前项目：项目；
构造函数（私有i:ItemService）{
this.items=i.items；
}
已单击（项目：项目）：无效{
this.currentItem=项目；
}
isSelected（项：项）：布尔值{
如果（！item | |！this.currentItem）{
返回false；
}
return item.val==this.currentItem.val；
}
}
@组成部分({
选择器：'子组件'，
输入：['item']，
模板：`
{{item.val}}
`
})
导出类ChildComponent{}

向

子组件添加样式

@组件({
选择器：'子组件'，
输入：['item']，
模板：`
{{item.val}}
`,
风格：[`
：主机（.bordered）>div{
//如果此选择器不起作用，请改用
//子组件。带边框>div{
边框：3倍纯红；
}
`],
})
导出类ChildComponent{}
我找到了更好的方法来解决这个问题，充分利用Angular2的功能

具体来说，您可以通过更改以下内容将变量传递给子组件，而不是使用：host和CSS功能进行欺骗：

[class.bordered]='isSelected(item)'

在子类的元素中设置后，将其更改为

[isBordered]='isSelected(item)'

然后，在要应用带边框类的div上，在子组件的模板中添加：

[ngClass]='{bordered: isBordered}'

以下是更改的完整代码：

@Component({
  selector: 'parent-component',
  directives: [ChildComponent],
  template: `
    <child-component
      *ngFor='#item of items'
      [item]='item'
      (click)='clicked(item)'
      [isBordered]='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 [ngClass]='{bordered: isBordered}'>
      {{ item.val }}
    </div>
  `
})
export class ChildComponent {}

@组件({
选择器：“父组件”，
指令：[ChildComponent]，
模板：`
`
})
导出类ParentComponent{
项目：项目[]；
当前项目：项目；
构造函数（私有i:ItemService）{
this.items=i.items；
}
已单击（项目：项目）：无效{
this.currentItem=项目；
}
isSelected（项：项）：布尔值{
如果（！item | |！this.currentItem）{
返回false；
}
return item.val==this.currentItem.val；
}
}
@组成部分({
选择器：'子组件'，
输入：['item']，
模板：`
{{item.val}}
`
})
导出类ChildComponent{}
像这样的东西对我来说非常有用：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
样式URL:['./app.component.css']，
模板：`
{{btnText}}
`
})
导出类AppComponent{
名称='角度'；
btnText='单击我'；
btnDisabled=false；
buttonClick1（）{
this.btnDisabled=true；
this.btnText='你点击了我'；
设置超时（（）=>{
this.btnText='再次单击我'；
this.btnDisabled=false
}, 5000);
}
}

下面是一个工作示例：

虽然这确实解决了问题，但我更喜欢下面找到的更干净的解决方案。