输入更改时不会触发指令

Question

我正在实现一个指令，它将一种语言（或一组语言）作为输入，并将一个类添加到添加了该指令的DOM元素中。

@Directive({
  selector: '[appRtlView]'
})
export class RTLViewDirective implements OnInit, OnChanges {
  @Input('appRtlView') inputLanguage: string | string[];

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.handleRtl();
  }

  private handleRtl() {
    if (this.inputLanguage) {
      let languageList = null;

      if (!Array.isArray(this.inputLanguage)) {
        languageList = [this.inputLanguage];
      } else {
        languageList = this.inputLanguage;
      }

      // both conditions do stuff with this.el.nativeElement.classList
      if (languageList.includes('ar')) {
        this.addRtl();
      } else {
        this.removeIfRtlExists();
      }
    }
  }
}

下面是我使用该指令的地方。 “languagesInView”是一个字符串列表，在使用@Input（）使用该指令的组件中被摄取...

<div *ngIf="concept">
  <div class="concept-header" [appRtlView]="languagesInView">
    ...
  </div>
</div>

我希望当传递给组件的languagesInView输入发生更改时，我传递给模板中[appRtlView]的值会发生变化。 （我可以通过使用插值{{languagesInView}}将值打印到屏幕来看到值实际发生了变化

在RTLView指令中，如果我使用ngOnInit，则不会选择对“inputLanguage”字段的更改。

为了解决这个问题，我在指令中使用了ngOnChanges（实现OnChanges可以实现我想要的）：

// ngOnInit added because Angular doesn't accept a directive without an OnInit implementation
  ngOnInit() {}

  ngOnChanges(change: SimpleChanges) {
    // TODO: A check to see if the input value has changed or not would help performance
    this.handleRtl();
  }

我无法在指令初始化中添加changeDetectionStrategy，这使我认为指令通常不应该实现OnChanges。我的在线搜索没有太多帮助。

在Angular指令中运行ngOnChanges是错误的吗？

谢谢

Answer 1

ngOnChanges仅在输入更改来自<component [someInput]="aValue">之类的模板绑定时运行。

有几种方法可以解决这个问题。

• 直接进行ngOnChanges会做的更改。
• 使用ChangeDetectorRef手动触发变化检测。

Answer 2

我想我的答案来自lifecycle hooks documentation。我的问题归结为我是否可以使用/应该在指令中使用ngOnChanges。粗线条几乎是我所需要的。

生命周期钩子

组件具有由Angular管理的生命周期。

Angular创建它，渲染它，创建和渲染它的子节点，在数据绑定属性发生变化时检查它，并在从DOM中删除它之前销毁它。

Angular提供生命周期钩子，可以提供对这些关键生命时刻的可见性以及在它们发生时采取行动的能力。

指令具有相同的生命周期钩子集。

感谢大家的回应。