Question

我们刚刚将项目从Angular 6升级到Angular 7，并注意到以下问题，即在销毁组件之前发出NavigationEnd事件。在升级到Angular 7之前，我们已经看到销毁组件之后会发出NavigationEnd事件。

WidgetContainerComponent的每个实例都订阅了ngOnInit中可观察到的配置，并且ngOnDestroy会取消订阅它。

  constructor(@SkipSelf() private dataProviderDirective: DataProviderDirective) {
    super();
  }

  ngOnInit(): void {
    console.log("WidgetContainer.ngOnInit called");
    const _self = this;
    this.dataProviderDirective.getConfigurationPublisher().subscribe(widgetConfigurations => {
      _self.processConfiguration(widgetConfigurations, this.alias);
      this.subscribe(this.wsDataTopic + this.configuration.id, (message: Message) => this.onDataTopic(message));
      this.subscribe(this.wsStaleTopic + this.configuration.id, (message: Message) => this.onStaleTopic(message));
    });
  }

  ngOnDestroy(): void {
    console.log("WidgetContainer.ngOnDestroy() called");
  }

容纳这些组件的另一个组件（DashboardContainerComponent）具有以下内容：

  navigationSubscription;

  constructor(@Host() private dashboardComponent: DashboardComponent, private router:Router) {
    super();
    this.navigationSubscription = this.router.events.subscribe((e: any) => {
      // If it is a NavigationEnd event re-initalise the component
      if (e instanceof NavigationEnd) {
        console.log("DashboardContainerComponent.onNavigationEnd()");
        this.initialize();
      }
    });
  }

  ngAfterViewInit(): void {
    console.log("DashboardContainerComponent.ngAfterViewInit()");
    this.initialize();
  }

  ngOnDestroy(): void {
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }

  private initialize(): void {
    this.publishConfiguration(this.dashboardComponent.getWidgets());
  }

我们期望看到的是，从一个仪表板页面导航到另一个仪表盘页面时，屏幕上现有的WidgetContainerComponents将首先被破坏，然后触发NavigationEnd事件，从而使容器从服务器重新加载新的窗口小部件配置。同时，将为新的仪表板页面重新创建新的WidgetContainerComponents并订阅容器配置事件。

但是，相反，我们看到的是用户导航到新的仪表板，发出导航端，并且容器发出新的窗口小部件配置。然后，旧的窗口小部件容器实例和新的窗口小部件容器实例都试图处理此事件，并且旧的窗口小部件容器正在出错，因为它们要查找的数据不存在（因为它们不属于此页面）。

我们不确定这是否是这些生命周期事件发生时间的有意改变，但是我们有什么办法可以防止这种情况的发生？

Angular 7-NavigationEnd和OnDestroy计时问题

0 个答案: