升级到 Angular 2.0 路由策略答案

【问题标题】：Upgrade to Angular 2.0 Routing strategy升级到 Angular 2.0 路由策略
【发布时间】：2015-12-23 13:37:17
【问题描述】：

我正在将我的应用从 Angular 1.X 迁移到 Angular 2.0，并且在迁移过程中/之后我正在考虑路由解决方案。

我目前正在使用带有resolve 的ui-router，以便为每条路由传递数据。

经过一番阅读，我遇到了this post。据我了解，新路由器中没有resolve。我现在有两个选择：

继续使用我当前的 ui-router 和我的混合 ng1-2 应用程序（可能吗？），并通过路由器的 resolve 带来每个路由的数据。它会起作用吗？
更改路由并使用新的Component Router。这将使逐步升级变得更加困难，因为我必须将当前的 Angular 1.X 数据获取更改为在每个控制器/指令内 + 我不会有 Angular 2 的 @CanActivate 它将等待数据得到解决。

哪个选项更好？还有其他选择吗？什么在这里起作用？

谢谢！

【问题讨论】：

【解决方案1】：

我在工作中遇到了同样的问题。我尝试了很多东西，但最后我使用了一个服务：

var data = {
  'foo': 'bar'
}

export const StateData = {
  data: data
};

所以现在我可以在我的组件顶部导入服务：

import { StateData } from '/services/StateService.ts';

然后我可以通过简单的操作来设置和获取服务中的数据：

StateData.data.foo = "something other than bar"

现在，当您切换路线时，您可以在 constructor() 或 afterViewInit() 方法中检索新的更新数据。

*使用 StateService 的另一个好处是，您可以通过简单地添加以下方法（您可以任意命名）在所有组件之间绑定您的数据：

getStateData(key) {
    return StateData.data[key];
}

您可以通过执行以下操作从 dom 本身调用此方法：

{{getStateData('foo')}} --> will print out the value "bar"

现在，如果您在不同组件的服务中更改 foo 的值，它将在 dom 中更改，因为每当发生更改时都会调用 getStateData() 并且服务仅在页面加载时加载一次。

我相信 init 和 afterViewInit 方法是他们没有为新路由器添加解析的原因，或者他们还没有发布带有它的版本。

我希望这对您有所帮助。我不认为使用 Angular 1.x + Angular 2.0 会很容易，也不会很有趣，哈哈

我最近在 Angular 2.0 中重建了我的个人网站。该代码是公开的，因此您可以查看它。如果您查看contactCard.ts、contact-card.html 和StateService.ts，您可以看到它的实际作用。这是回购：

【讨论】：