输入更改时不会触发指令

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

下面是我使用该指令的地方。" LanagingagesInview"是字符串列表，在使用@Input（）...

的组件中摄入的组件中摄入

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

我希望，当传递到组件中的语言输入变化时，我将我传递给模板中的[andtlview]的值将会更改。（我可以看到，该值实际上是通过使用插值将值打印到屏幕上来改变的，

在RTLVIEW指令中，如果我使用ngoninit，则不会拾取"输入语言"字段的更改。

为了克服这一点，我正在指令中使用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();
  }

我无法在指令初始化中添加更改的介绍性，这使我认为通常不应该实施指令。我的在线搜索没有很多帮助。

在角指令中运行ngonchanges是错误的吗？

谢谢

Answer 1

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

有几种解决此问题的方法。

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

Answer 2

我想我有回答，从生命周期钩文档中。我的问题归结为我是否可以/应该在指令中使用ngonchanges。粗体线几乎是我需要的。

生命周钩

一个组件具有由角度管理的生命周期。

Angular创建它，渲染，创建并渲染其子女，在其数据结合属性更改并将其拆除之前对其进行检查，然后将其删除。

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

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

感谢所有回应的人。