代码之家 › 专栏 › 技术社区 › L. Tudy

角5更新后重新加载所有子组件的数据

angular5 redirect user-interface angular

1

L. Tudy · 技术社区 · 6 年前

我有一个组件 人员组成部分 扩展抽象组件 个人父组件 (包含人员模型)我在其中使用模型中的一些信息。在这个组件中,我还为地址和其他信息定义了其他组件,这些信息也扩展了相同的内容。 个人父组件 .

我要做的是更新个人模型后,重定向到相同的路径,并查看所有组件中的更改。使用解析器将数据注入所有组件中。 个人解析器 和 活性染料 .

export abstract class PersonParentComponent {

  person: Person= new ..();
  personRegister: Person= new ..();;

  protected constructor(private activatedRoute: ActivatedRoute,
                        private translate: TranslateService) {
    this.activatedRoute.data.subscribe(data => {
      const persons = data['person'];
      this.person = persons[0];
      this.personRegister = persons[1];
    });
  }
...
}

为了能够重定向到相同的路由并强制解析程序调用数据,我这样定义了路由( RunguardsandSolvers:“始终” ):

      {
    path: 'personen/:personId',
    component: PersonTabsComponent,
    resolve: {person: PersonVeResolver},
    runGuardsAndResolvers: 'always'
  }

    @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

比执行更新后,我重定向到相同的路由使用:

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['personen/'.concat(String(id))]);

我的问题是数据只在 人员组成部分 组件也不在其中包含的子组件中,即使解析器的resolve方法正在运行。

您知道我是否丢失了某些内容,或者如何强制子组件也重新加载数据?

PS:我不想做window.location.reload()讨厌的解决方案。:)

谢谢!

2 回复 | 直到 6 年前

1

D33 6 年前

我的组件也有类似的行为,原因是我在子组件中加载数据的方式。如果将数据加载到组件的生命周期挂钩中(例如ngoninit),则当您导航到同一路径时,您的子组件将不会重新加载其数据,因为它们已经加载到您的页面中。

在意识到这一点之后,我开始遵循本文中描述的“数据流”方法: https://bulldogjob.com/articles/539-scalable-angular-application-architecture ,其中有一个顶级组件加载所需的所有数据,该数据通过@inputs传递给子组件。以这种方式构建组件,解决了我的问题。

作为解决方案,您还可以创建一个新组件作为重定向器。因此,您可以创建一个加载此新组件的新路由,并在其中将浏览器重定向到所需的路由。这样,您将再次加载每个组件(主组件及其子组件),而不需要执行window.location.reload()。这种方法的缺点是它会干扰您的导航历史(即,它会破坏后退按钮),您必须手动修复它。

2

0

Sunny Goel 6 年前

我建议你实施Redux link 国家管理框架。

它是管理应用程序状态的一种很好的方法。它是一个单一的、不变的数据存储。单向数据流。一种基于纯函数和动作流的改变方法。