Angular2组件无故重新加载两次答案

【问题标题】：Angular2 component reloads twice for no reasonAngular2组件无故重新加载两次
【发布时间】：2017-02-20 05:27:06
【问题描述】：

我正在开发一个 angular2 RC4 应用程序，我开始注意到一些奇怪的事情。我有一堆组件可以路由到：

Parent(A) - ManyChildren(B,C,D,E)

我的组件 A 获取 ID，与服务对话以获取项目并更新状态。其他组件使用 BehaviorSubjects 监听状态“selectedItem”。

 path: ':id/steps',

一切正常，除了当我尝试通过 URL 作为全新的重新加载（新窗口）导航时出现一些不可预知的行为。

当我尝试完全重新加载我的页面（假设用户想要为页面添加书签）时，我会被路由到正确的页面并且所有值都已正确设置。但是，当我尝试导航到同一棵树时，组件 A 会重新加载。

我会去

localhost/items/1/steps/step1

Parent A 构造函数运行。当我去

localhost/items/1/steps/step2

Parent A 构造函数再次运行。这对我来说真的是不可接受的，因为我希望我的组件被加载一次并且恰好一次。我错过了什么吗？（RC4）

【问题讨论】：

请添加您的路线和所述组件代码。
您使用的是 angular2 版本还是 alpha/rc？因为路由器发生了很大变化，而且以前的版本（当前版本被称为 v3）存在错误。
你怎么知道Parent A的构造函数又在运行了？
我可以把控制台日志放在那里，看看它被记录了两次

标签： angular angular-routing angular2-template

【解决方案1】：

我不知道这种行为的原因。真奇怪。但正如https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html 中的文档所说，您应该将服务逻辑保留在 ngOnInit() 而不是构造函数中：

不要在组件构造函数中获取数据。您不必担心新组件在测试中创建时或在您决定显示它之前会尝试联系远程服务器。构造函数应该只将初始局部变量设置为简单值。

我不知道它是否能解决您的问题。试试看，让我们知道。

【讨论】：

我将所有底层组件中的代码移到了 ngOnInit()，而且行为完全相同 - ngOnInit() 为从路由获取 ID 的组件运行了两次

【解决方案2】：

这里Why does my angular2 app initialize twice? 另一个用户有同样的行为，因为他将 AppComponent 配置为默认路由。也许您的问题与此类似？我们几乎没有信息可以了解和解决您的问题。

【讨论】：

【解决方案3】：

一段时间后我发现了错误。由于我们仍处于 RC4，并且当时我们正在设置构建系统 - 我们已经使用 WebPack 设置了一些延迟加载。无论出于何种原因，它都是导致重新加载的原因。

        path: 'clients',
        component: 'ClientsComponent',
        //canActivate: [WebpackAsyncRoute], << THIS LINE // Async components with children routes must use WebpackAsyncRoute
        children: [

【讨论】：