Question

我有一个报表组件，该组件具有“行为主题”订阅，它在.next调用后从Web api中提取数据。当我移至报告页面后的另一页面时，报告组件仍然有效，并继续向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

您可以使用OnDestroy生命周期钩子在页面销毁时取消订阅行为主体

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

Answer 2

创建一个Subject属性并接受订阅，直到它在ngDestroy中被破坏

sentry_wait_for_error:
    type:         fingers_crossed
    action_level: error
    handler:      sentry_buffer
    excluded_http_codes:
        4xx: ~
sentry_buffer: # All records must be sent at once!
    type:    buffer
    handler: sentry_failure_handler
sentry_failure_handler:
    type: whatfailuregroup
    members: [sentry]
sentry:
    type:  raven
    dsn: '%env(SENTRY_DSN)%'
    level: debug
    auto_log_stacks: true
    release: '%env(APP_VERSION)%'

Answer 3

只需使用async管道即可在模板上显示数据，而无需订阅BehaviorSubject。

this.data$ = this.reportService.behaviourSubjectObj

在您的模板中：

{{ data$ | async | json }}

Answer 4

使用ComphonentRef，如果您想从父级销毁它，请遵循以下代码

@ViewChild（ChildComponent，{阅读：ComponentRef}）childComponentRef：ComponentRef;

通话

this.childComponentRef.destroy（）

在parent事件中起作用。

请参阅此link

移至另一个菜单时，销毁Angular 5组件

4 个答案: