angular - правильное использование жизненного цикла компонента - PullRequest
Новая
       81

angular - правильное использование жизненного цикла компонента

0 голосов
/ 09 июля 2020

Меня немного смущает правильное использование жизненного цикла в компоненте. Я изложу это на примере. У меня есть компонент, похожий на этот: 

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],
})
export class ChildComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {    

    @Input() id: number;
    @ViewChild('myViewChild') myViewChild;
    subscriptions: Array<Subscription> = [];

    ngOnInit() {
        // this.reloadData() ?
    }

    ngAfterViewInit() {
        // this.reloadData() ?
    }


    ngOnChanges(changes: SimpleChanges) {
        if (changes != null && changes.id != null) {
          if (changes.id.previousValue !== changes.id.currentValue) {
            // this.reloadData() ?
          }
        }
    }    

    ngOnDestroy() {
        this.cancelSubs();
    }    

    public reloadData(){
        this.cancelSubs();
        this.subscriptions.push(
            this.myService.getObject(this.id)
              .subscribe(res => {
                //....
              }, error => {
                //...
              })
          );
    }   

    public cancelSubs(){    
        this.subscriptions.forEach((subscription: Subscription) => {
          subscription.unsubscribe();
        });
    }

}

Где мне использовать this.reloadData () для инициализации компонента?

  • ngOnInit: Я знаю то, что я не могу, потому что я использую myViewChild, и на данный момент это не определено. Мы должны дождаться ngAfterViewInit
  • ngAfterViewInit: ОК, но не обнаруживаем изменений в идентификаторе
  • ngOnChanges: Как я понимаю из документации, он запускается до ngOnInit так что в какой-то момент он может быть myViewChild не определен, это правильно? Когда запускается ngOnChanges, могу ли я использовать this.id в reloadData или мне следует использовать changes.id.currentValue?

Если я помещаю this.reloadData () в ngAfterViewInit и ngOnChanges, метод reloadData будет выполнен дважды. Если я помещу его только в ngOnChanges, он работает правильно, но я сомневаюсь, что myViewChild в любом случае не будет определен.

Нужно ли выполнять cancelSubs на reloadData?

Асинхронно я понимаю, что может случиться так, что я изменю идентификатор, и второй вызов завершится раньше первого. Но асинхронность в javascript сбивает меня с толку, и я не видел примеров, чтобы люди делали это. Это хорошая практика?

Нужно ли мне отказываться от подписки на ngOnDestroy?

В некоторых блогах говорится, что в этом нет необходимости. Но разве это хорошая практика?

...