Уничтожить компоненты Angular 5 при переходе в другое меню

Question

У меня есть компонент отчета, который имеет подписку Behavior Subject, и он извлекает данные из веб-интерфейса после .next вызова.Когда я перемещаюсь на другую страницу за страницей отчета, компонент отчета все еще жив и продолжает отправлять вызовы в webApi.

Как уничтожить компоненты после перехода к другой или отписаться от темы поведения.ПодробнееУ меня есть несколько компонентов отчета, он отображает отчеты разных типов.Один из компонентов ниже

@destroyAllSubscribers()
    export class StandardReportComponent implements OnInit {

    public subscriptions: Subscription[] = [];
    reportData = [];
    showReport=false;
    constructor(private reportService: ReportService)
    {

        this.subscriptions.push(this.reportService.chartType.subscribe(chartType => {

        if (this.currentChart != ReportChartType.None){

         this.showReport=false;  //Used in *ngIf to show report HTML template
            this.reportService.getReportData().subscribe(result=>{
        this.reportData=result; 
        this.showReport=true; //Used in *ngIf to show report HTML template


    }

    }

    }
    }

У меня есть уничтожитель-декоратор подписчика, который запускается при уничтожении компонента,

Код:

export function destroyAllSubscribers() {
    return (targetComponent: any) => {
      targetComponent.prototype.ngOnDestroy = ngOnDestroyDecorator();

      function ngOnDestroyDecorator() {
        return function () {
          if (this.subscriptions != undefined)
          {
            this.subscriptions.forEach(subscription => {
              if (subscription instanceof Subscriber) {
                subscription.unsubscribe();
              };
            });
          }
        };
      }
    };
}

Следует отписаться;однако вся подписка выполняется после перехода на другую страницу.

Answer 1

Используйте ComphonentRef, если вы хотите уничтожить его из родительского, следуйте приведенному ниже коду

@ ViewChild (ChildComponent, {read: ComponentRef}) childComponentRef: ComponentRef;

вызов

this.childComponentRef.destroy ()

функция в событии родителя.

см. Ссылку

Answer 2

Создайте свойство Subject и принимайте подписку, пока она не будет уничтожена в ngDestroy

class MyComponent {
  destroyed$ = new Subject();

  ngOnDestroy() {
    this.destroyed$.next();
  }

  myMethod() {
   this.apiHelper.get('some/url')
     .pipe( takeUntil(this.destroyed$) )
     .subscribe(()=> {
       // do things
     });
  }
}

Answer 3

Просто используйте async pipe для отображения данных в шаблоне без необходимости подписки на BehaviorSubject.

this.data$ = this.reportService.behaviourSubjectObj

В вашем шаблоне:

{{ data$ | async | json }}

Answer 4

Вы можете отписаться от темы поведения на странице уничтожения, используя хук жизненного цикла OnDestroy, как это

this.sub_State = this.stateService.showStateBehaviorSubject.subscribe((state: boolean) => {
            this.showState = state;
        });
ngOnDestroy() {
        this.sub_State .unsubscribe();
    }