Question

我们正在创建一个小型Angular应用程序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>的内容区域，其中子组件显示取决于侧导航器上的选择 - 非常简单（请参阅下面的代码片段）。应显示每个子组件表单中用户数据的特定部分。

当应用程序启动时，父项的ngOnInit方法使用服务来调用端点，以便一次性检索所有用户数据。这一切都运行良好 - 服务是在角度巡回英雄服务之后建模的，我们有这方面的经验。我还想使用共享服务来保持这个检索到的用户，这样子组件就不必在每次显示时都获取它。我已在应用的@NgModule中提供此共享服务一次。当创建第一个子组件以显示在父级的内容区域中时，会调用它自己的ngOnInit，其中我尝试在父级{{1}时检索我刚刚放在服务上的User对象。被叫了。

父模板：

ngOnInit

父ngOnInit：

<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>

孩子ngOnInit：

    ngOnInit(): void {
        this.userService.getUser(1)
            .then(user => this.userService.currentUser = user);
  }

我相信我会认识到正在发生的事情。这似乎是预期的行为代码，但我不知道如何解决。如果错误请纠正我。由于父级ngOnInit() { this.currentUser = this.userService.currentUser; }正在努力解决承诺，因此检索用户并将其置于服务上是异步操作。 ngOnInit完成并在其承诺代码执行时继续运行。同时，很快，子组件的ngOnInit被调用，因为它是父组件的默认子路由。它期望User对象在服务上可用，并尝试检索它。因为我收到了未定义的对象错误，所以在我看来，虽然父的ngOnInit已经完成，但异步承诺代码还没有完成将User对象放在服务上 - 因此未定义的数据和错误。

现在我的服务没有使用“Angular方式”使用Subject来处理共享数据。我一开始就是这样做的，但我认为这不是我们正在做的事所必需的，而且无论如何它都没有任何意义。此外，我已经看到可以使用Resolvers来确保在激活路由之前定义数据，但是在听到Stackoverflow之前我不愿意走这条路，因为看起来我需要为每个子路由使用不同的Resolver - 不确定。否则，似乎我可能需要在每个子组件的ngOnInit方法中检索数据，我觉得使用共享服务会帮助我避免。

确保在呈现页面之前设置子组件属性值的最佳或首选方法是什么？

路由子组件的Angular 4表单属性在视图呈现时不可用

0 个答案: