Angular 2 - 将条件样式应用于指令的子 HTML 元素

Question

我正在尝试根据单击事件将类应用于 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 {}

Answer 1

为子组件添加样式

@Component({
  selector: 'child-component',
  inputs: ['item'],
  template: `
    <div class="This is where I really want to apply the style">  
      {{ item.val }}
    </div>
  `,
  styles: [`
    :host(.bordered) > div {
    // if this selector doesn't work use instead
    // child-component.bordered > div {
      border: 3px solid red;
    }
  `],
})
export class ChildComponent {}