Question

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

问题在于，当我们在子屏幕中编辑记录并且我们回到主屏幕时，我们必须重新加载特定数据，而不是所有整个主屏幕。我们必须以某种方式从组件中获取相关数据已被更改并且必须更新。

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

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

Answer 1

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

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

将路由器注入您的组件。
订阅路由器事件。如果您的组件捕获任何路由器事件，这可能意味着组件已离开，并且必须在用户返回后刷新数据。因此，如果您收到路由器事件，请将一些标志放入组件
现在我们需要知道的是，当用户回来时。我们通过覆盖默认挂钩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();
  }
}

Answer 2

如果您可以从详细信息组件访问父组件属性，则问题可能是角度变化检测。详情（https://github.com/primefaces/primeng/issues/2606）。如果您无法从详细信息组件访问父组件属性，请尝试使用共享服务。希望它会有所帮助

Answer 3

这有点晚了，但对将来的访问者可能有用。将其放在正在重用的组件的ngOnInit中。它将从路线的第二个入口开始执行，因此预订后需要通话。另外，您可能想在ngOnDestroy方法内添加取消订阅。

  export class ClassOfThisComponent implements OnInit {
    (...)
    public ngOnInit: void {
      this.router.events.subscribe(ev => {
        if (ev instanceof ActivationEnd &&
          Object.is(ev?.snapshot?.component, ClassOfThisComponent)) {
          initialFetch();
        }
      });

      initialFetch();
    }

    private initialFetch(): void {
      // do stuff here
    }

    (...)
  }

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

3 个答案: