Angular 6+ должны ли все @Inputs быть наблюдаемыми? - PullRequest
Новая
       13

Angular 6+ должны ли все @Inputs быть наблюдаемыми?

2 голосов
/ 19 марта 2019

Я относительный новичок в Angular (6+) и все еще нахожу свой путь через его чудесный и часто запутанный пейзаж.Одна вещь, которая недавно сожгла меня, это рефакторинг нескольких компонентов, которые извлекали некоторые данные OnInit(), чтобы позволить им повторно извлекать данные всякий раз, когда вместо этого изменяется любое из его свойств @Input().Это включало создание всех @Input() свойств Observable.

Я понимаю, что есть обработчик NgOnChanges(), который можно реализовать для решения этой проблемы, однако он выглядел чрезвычайно хрупким и сложным в обслуживании и расширении из-за его потери

Рефакторинг существующего компонента был трудным и занимал много времени из-за множества предположений, сделанных в определении компонента, однако, когда я понял, что это работает, я понял, что проще использовать Observables для чего-либо из-за гибкостии расширяемость.

То, что я решил после этого упражнения, сделать все @Input() переменными наблюдаемыми в будущем по умолчанию, так как это, кажется, поощряет хорошие практики и значительно упрощает дальнейшие расширения и т. д.

Что все думают по этому поводу?Это хороший шаблон, чтобы войти в?Почему и почему нет?Перевешивают ли незначительные накладные расходы, которые, как я полагаю, связано с использованием шаблона Observable / / etc?

Спасибо!

Ответы [ 2 ]

3 голосов
/ 19 марта 2019

По моему мнению, наличие наблюдаемых для всех входных данных просто для прослушивания изменений является излишним.Одним из способов справиться с этими @Input изменениями является использование метода установки для ваших свойств. 

public _prop1: any;

@Input() set prop1(value: any) {

   this._prop1 = value || {};

   this.fetchdata();
}

public _prop2: any;

@Input() set prop2(value: any) {

   this._prop2 = value || {};

   this.fetchdata();
}

public ngOnInit() {

   this.fetchdata();
}

public fetchdata() {

  // Fetch data only when both the properties are available
  if(!this._prop1 || !this._prop2) {
     return;
  }
  // fetch data
}

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

Это всего лишь один из способов разработки вашего компонента, чтобы избежать наблюдаемых изменений входных данных.Есть и другие подходы.

2 голосов
/ 19 марта 2019

Шаблон, который я обычно использую, состоит в том, что компоненты контейнера имеют наблюдаемые свойства и передают его дочерним компонентам с помощью асинхронного канала. 

data$ = this.dataService.data$;

и в представлении 

<child-component [data]="data$ | async"></child-component>

Или я заключаю его в ngIf с переменной представления 

<ng-container *ngIf="data$ | async as data">
    <child-component [data]="data"></child-component>
</ng-container>

Я расскажу об этом паттерне в статье о моей государственной библиотеке управления здесь https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

...