Angular 5 更新后重新加载所有子组件的数据
Angular 5 reload data for all sub components after update
我有一个组件 PersonTabsComponent 它扩展了一个抽象组件 PersonParentComponent（包含人物模型），我在其中使用了模型中的一些信息.在这个组件中，我还定义了其他组件，用于地址和其他信息，它们也扩展了相同的 PersonParentComponent.
我想做的是在更新重定向到同一路由的人员模型后，查看所有 components.The 数据的变化使用解析器 PersonResolver[=37] 注入所有组件=] 和 activatedRoute。
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];
});
}
...
}
为了能够重定向到同一路由并强制解析器调用数据，我定义了这样的路由（runGuardsAndResolvers：'always'）：
{
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))]);
我遇到的问题是数据仅在 PersonTabsComponent 组件中更新，而不是在其中包含的子组件中更新，即使运行解析器的解析方法也是如此。
你知道我是否遗漏了什么或者我怎样才能强制子组件也重新加载数据？
PS：我不想做 window.location.reload() 讨厌的解决方案。 :)
谢谢！
我的组件有类似的行为，原因是我在子组件中加载数据的方式。
如果您将数据加载到组件的生命周期挂钩之一（例如 ngOnInit）中，您的子组件将不会在您导航到同一路由时重新加载其数据，因为它们已经加载到您的页面中。
意识到这一点后，我开始遵循 post 中描述的 "Data flow" 方法：https://bulldogjob.com/articles/539-scalable-angular-application-architecture，其中您有一个加载所有所需数据的顶级组件，并且该数据通过@Inputs 传递给子组件。以这种方式构建我的组件，解决了我的问题。
作为解决方法，您还可以创建一个新组件作为重定向器。因此，您创建了一个新路由来加载这个新组件，并在其中将浏览器重定向到您想要的路由。这样做，你将再次加载每个组件（主要组件及其子组件），而无需执行 window.location.reload()。
这种方法的缺点是它会扰乱您的导航历史记录（即它会破坏后退按钮），您将不得不手动修复它。
我建议你实现 Redux link 状态管理框架。
这是一种管理应用程序状态的好方法。它是一个单一的、不可变的数据存储。
单向数据流。
一种基于纯函数和一系列操作的更改方法。
我有一个组件 PersonTabsComponent 它扩展了一个抽象组件 PersonParentComponent（包含人物模型），我在其中使用了模型中的一些信息.在这个组件中，我还定义了其他组件，用于地址和其他信息，它们也扩展了相同的 PersonParentComponent.
我想做的是在更新重定向到同一路由的人员模型后，查看所有 components.The 数据的变化使用解析器 PersonResolver[=37] 注入所有组件=] 和 activatedRoute。
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];
});
}
...
}
为了能够重定向到同一路由并强制解析器调用数据，我定义了这样的路由（runGuardsAndResolvers：'always'）：
{
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))]);
我遇到的问题是数据仅在 PersonTabsComponent 组件中更新，而不是在其中包含的子组件中更新，即使运行解析器的解析方法也是如此。
你知道我是否遗漏了什么或者我怎样才能强制子组件也重新加载数据？
PS：我不想做 window.location.reload() 讨厌的解决方案。 :)
谢谢！
我的组件有类似的行为，原因是我在子组件中加载数据的方式。 如果您将数据加载到组件的生命周期挂钩之一（例如 ngOnInit）中，您的子组件将不会在您导航到同一路由时重新加载其数据，因为它们已经加载到您的页面中。
意识到这一点后，我开始遵循 post 中描述的 "Data flow" 方法：https://bulldogjob.com/articles/539-scalable-angular-application-architecture，其中您有一个加载所有所需数据的顶级组件，并且该数据通过@Inputs 传递给子组件。以这种方式构建我的组件，解决了我的问题。
作为解决方法，您还可以创建一个新组件作为重定向器。因此，您创建了一个新路由来加载这个新组件，并在其中将浏览器重定向到您想要的路由。这样做，你将再次加载每个组件（主要组件及其子组件），而无需执行 window.location.reload()。 这种方法的缺点是它会扰乱您的导航历史记录（即它会破坏后退按钮），您将不得不手动修复它。
我建议你实现 Redux link 状态管理框架。
这是一种管理应用程序状态的好方法。它是一个单一的、不可变的数据存储。 单向数据流。 一种基于纯函数和一系列操作的更改方法。