Angular 2 如何仅在有变化或发生某些事情时添加class

Question

我注意到如果我们根据函数声明 [ngClass]，应用程序会不断调用该函数。或者，如果我们绑定到一个布尔变量，如果没有任何反应，它也会检查该值。

我想知道是否有一种方法可以实现与 ngClass 相同的效果，但仅在 "something happens" 时才调用函数或检查布尔值。当按下一个按钮，或按下任意按钮时。

我不知道解决方案是否可以使用 ngChange 但我没有看到更改 class 的方法，然后没有直接参考控制器中的 DOM 元素我正在尝试闪避.

Answer 1

你完全正确。 ngOnChanges() 任何 @Input() 属性更改时都会触发生命周期挂钩。

例如，

在你的主要组件中

<app-child-component [childData]="childData"> Some Text </app-child-component>

 this.service.getData().subscribe((data)=>{
    this.childData = data;
});

childData 值改变的那一刻

ngOnChanges(changes: SimpleChanges){
    if(this.childData){
        //when value is present 
        this.assignSomeClass();
    }
}
assignSomeClass(){
    ///your code for ngClass
}

注意：ChildComponent 必须有 @Input() childData:any[]

Answer 2

使用 :host(..) 和@HostBinding

假设您有一个组件，您希望根据某些设置应用不同的 CSS classes，例如在您指定时使用 .yellow-style，在指定时使用 .red-style你传递红色：.

这里需要注意的重要一点是，与我们目前所做的不同，我们不希望 CSS class 应用于组件内部的某些元素，但是到组件本身。示例：

<styled style="red" _nghost-c0="" ng-reflect-style="red" class="red-
style">
    <div _ngcontent-c0="">
      I'm a div that wants to be styled
    </div>
</styled>

不过，出于可重用性的目的，我们的样式应该由组件本身提供，因此我们再次使用 StyledComponent 的样式属性：

@Component({
  selector: 'styled',
  template: `
    <div>
      I'm a div that wants to be styled
    </div>
  `,
  styles: [
    `
      :host(.yellow-style) {
        background-color: yellow;
        border: 1px solid black;
        display:block;
      }

      :host(.red-style) {
        background-color: red;
        border: 1px solid black;
        color: white;
        display:block;
      }
    `
  ]
})
export class StyledComponent { }

如您所见，我们使用特殊的 :host(...) 选择器来定位托管组件的元素上的样式。关于此的官方文档的更多信息。通过这种方式，.yellow-style 和 .red-style 将在主机组件级别可见，同时它们将被封装并且仅适用于我们 StyledComponent 中的元素。

接下来，我们定义一个@Input() 属性允许我们传入样式配置。

@Component({...})
export class StyledComponent {
    @Input() style;
}

我们仍然缺少的是根据样式输入属性的值以编程方式在我们的宿主元素上设置 CSS class。我们为此使用@HostBinding：

import { Component, Input, HostBinding } from '@angular/core';

@Component({ ... })
export class StyledComponent {
  @Input() style;

  @HostBinding('class.yellow-style') yellowStyle:boolean = false;
  @HostBinding('class.red-style') redStyle:boolean = false;

  ngOnChanges(changes) {
    let newStyle = changes.style.currentValue;

    if(newStyle === 'yellow') {
      this.yellowStyle = true;
      this.redStyle = false;
    } else if(newStyle === 'red') {
      this.yellowStyle = false;
      this.redStyle = true;
    } else {
      // nothing here.. (fallback?)
    }
  }
}

在 ngOnChanges 中，我们输入的样式属性发生了变化，我们适当地调整了我们的样式标志。（请注意，这不是最智能的代码，但它足够简单，所以你明白了:wink:)。

文本来自：https://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/ 所有优点都在那里。收集传播。您还有一个示例可以在网站上播放。

Angular 2 如何仅在有变化或发生某些事情时添加class

Angular 2 How to add a class only when there are changes or something happens

angularjs-ng-change

ng-class

angular