Директива не срабатывает при изменении входа - PullRequest
Новая
       31

Директива не срабатывает при изменении входа

0 голосов
/ 12 марта 2019

Я реализую директиву, которая принимает язык (или набор языков) в качестве входных данных и добавляет класс к элементу 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>

Я ожидаю, что когда изменятся входные данные languageInView, которые передаются в компонент, значение, которое я передам [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. Мой онлайн-поиск мало помог.

Разве неправильно запускать ngOnChanges в угловой директиве?

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Я думаю, что у меня есть ответ из документации по хукам жизненного цикла .Мой вопрос сводился к тому, могу ли я использовать / должен использовать ngOnChanges в директиве.Жирная линия была в значительной степени тем, что мне было нужно.

Хуки жизненного цикла

Жизненный цикл компонента управляется Angular.

Angular создает его, отображает, создает и отображает его дочерние элементы, проверяет его, когда его свойства привязаны к даннымизменить и уничтожить его перед удалением из DOM.

Angular предлагает крюки жизненного цикла, которые обеспечивают видимость этих ключевых моментов жизни и возможность действовать, когда они происходят.

Директиваимеет тот же набор хуков жизненного цикла.

Спасибо всем, кто откликнулся.

0 голосов
/ 12 марта 2019

ngOnChanges запускается только тогда, когда изменение ввода происходит из шаблона, например <component [someInput]="aValue">.

Есть несколько способов решить эту проблему.

  • Непосредственно внесите изменения, которые ngOnChanges сделает.
  • Вручную активировать обнаружение изменений с помощью ChangeDetectorRef.
...