我们正在创建一个小的Angular app poc(角度4.2.4,bootrap 4.0.0-beta2,ng-bootstrap 1.0.0-beta6,typescript 2.3.3) .
该应用程序将以模板驱动的形式显示用户数据 . 设置路由,以便在导航到localhost:4200时默认加载父组件 . 这个父组件有一个side-nav子组件,以及一个带有 <router-outlet>
的内容区域,其中子组件显示取决于在side-nav上做出的选择 - 非常简单(参见下面的代码片段) . 每个子组件应在表单中显示用户数据的特定部分 .
当应用程序启动时,父级的 ngOnInit
方法使用服务来调用 endpoints 以一次性检索所有用户数据 . 这一切都很好 - 服务是在角度巡回英雄服务之后建模的,我们有这方面的经验 . 我还想使用共享服务来保持这个检索到的用户,这样子组件就不必在每次显示时都获取它 . 我've provided this shared service once in the app' s @NgModule
. 当创建第一个子组件以显示在父_2978453中时,自己的_2978454被调用,其中我尝试在调用父亲的 ngOnInit
时检索我刚刚放在服务上的User对象 .
父模板:
<div class="container">
<div class="row">
<div class="col-3">
<user-sidenav></user-sidenav>
</div>
<div class="col-9">
<router-outlet></router-outlet>
</div>
</div>
</div>
parent ngOnInit:
ngOnInit(): void {
this.userService.getUser(1)
.then(user => this.userService.currentUser = user);
}
孩子ngOnInit:
ngOnInit() {
this.currentUser = this.userService.currentUser;
}
我相信我知道_2978459知道如何解决 . 如果错误请纠正我 . 由于父级的 ngOnInit
正在努力解决一个承诺,因此检索用户并将其置于服务上是异步操作 . ngOnInit
完成并继续执行其承诺代码 . 同时,很快,子组件的 ngOnInit
被调用,因为它是父组件的默认子路由 . 它期望User对象在服务上可用,并尝试检索它 . 由于我已完成,因此异步承诺代码尚未完成将User对象放在服务上 - 因此未定义的数据和错误 .
现在我的服务没有使用"the Angular way"使用Subject来处理共享数据 . 我一开始就是这样做的,但无论如何我都没有做出任何改变 . 另外,我需要为每个子路线使用不同的解析器 - 但不确定 . 否则,似乎我可能需要检索每个子组件的 ngOnInit
方法中的数据,我觉得使用共享服务会帮助我避免 .
在呈现页面之前,确保子组件属性值设置的最佳或首选方法是什么?