angularjs - 升级到 Angular 2.0 路由策略

Question

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

我目前正在使用 ui-router 和 resolve 来为每个路由传递数据。

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

1. 继续将我当前的 ui-router 与我的混合 ng1-2 应用程序一起使用(这可能吗？)，并通过路由器的 resolve 获取每条路线的数据。会成功吗？

2. 更改路由并使用新的Component Router。这将使逐步升级变得更加困难，因为我必须将当前的 Angular 1.X 数据获取更改为在每个 Controller /指令内 + 我不会有 Angular 2 的 @CanActivate这将等待数据被解析。

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

谢谢!

Answer 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 的一个额外好处是您可以通过简单地添加以下方法(您可以任意命名)在所有组件之间绑定(bind)数据:

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

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

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

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

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

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

我最近用 Angular 2.0 重建了我的个人网站。代码是公开的，大家可以去看看。如果您查看 contactCard.ts、contact-card.html 和 StateService.ts，您可以看到它在运行。这是 repo 协议(protocol):

https://github.com/YashYash/portfolio