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

【问题标题】：Angular 2 - Apply conditional style to a directive's child HTML elementAngular 2 - 将条件样式应用于指令的子 HTML 元素
【发布时间】：2016-04-30 23:23:54
【问题描述】：

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

[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 {}

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

给child-component添加样式

@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 {}

【讨论】：

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

【解决方案2】：

我找到了一个更好的方法来解决这个问题，充分利用 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 {}

【讨论】：

【解决方案3】：

这样的东西对我来说非常有用：

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);
  }
}

这是一个工作示例：
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html

【讨论】：