Angular 2/4.重用策略.如何通知组件它已被重用？

发布时间：2020-12-17 17:10:32 所属栏目：安全来源：网络整理

导读：我们使用NG2 / 4的东西.我们已经实现了一个自定义重用策略来完成从摘要到详细信息屏幕的导航,因此当用户单击后退按钮时,我们使摘要屏幕保持相同状态(防止重新创建). 问题是当我们在子屏幕上编辑记录并且我们回到主屏幕时,我们必须重新加载特定数据,而不是所

我们使用NG2 / 4的东西.我们已经实现了一个自定义重用策略来完成从摘要到详细信息屏幕的导航,因此当用户单击后退按钮时,我们使摘要屏幕保持相同状态(防止重新创建).

问题是当我们在子屏幕上编辑记录并且我们回到主屏幕时,我们必须重新加载特定数据,而不是所有整个主屏幕.我们必须以某种方式来破坏相关数据已被更改的组件,并且必须更新.

但是在策略类中,没有方法可以访问该组件.是类但没有它们的实例,因此不清楚如何让组件知道特定的更改.

public shouldReuseRoute(future: ActivatedRouteSnapshot,current: ActivatedRouteSnapshot): boolean {
    // I guess here we have to treat it somehow if it is possible
}

解决方法

有同样的问题：我们的应用程序中有十几个组件正在被重用.幸运的是,所有这些都是从一个抽象类继承的,所以这个解决方案只在一个地方实现.

解决方法非常难看,但它涵盖了需求,非常小而且容易.

>将路由器注入组件.
>订阅路由器事件.如果您的组件捕获任何路由器事件,这可能意味着组件已离开,并且必须在用户返回后刷新数据.因此,如果您收到路由器事件,请将一些标志放入组件中
>现在我们需要知道的是,当用户回来时.我们通过覆盖默认钩子ngDoCheck来跟踪它.
>如果正在调用ngDoCheck回调并且您的标志为true,请将该标志设置为false并重新加载数据

constructor(router: Router) {
  super();

  router.events.subscribe(e => {
    if (!this._reloadData) {
      this._reloadData = true;
    }
  });
}

private ngDoCheck() {
  if (this._reloadData) {
    this._reloadData = false;
    this.resetData();
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!