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]的值也会发生变化。（我可以看到，通过使用插值{{languageInView}}将值打印到屏幕上，该值实际上发生了变化）

在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提供了生命周期挂钩，这些生命周期挂钩可让您查看这些关键生命时刻以及它们发生时的行动能力。

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

感谢所有回复的人。

输入更改时，指令不会触发

2 个答案: