7

我有一个 Angular 1/Angular 2 混合应用程序，它与 rc.3 和已弃用的路由器一起使用。从我能找到的所有来源来看，rc.5 是迈向新路由器的一大步。我能够引导我的混合应用程序并渲染我的根组件，但路由不起作用。

var upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

angular.module('ng1App', [])
  .directive('myBaseComponent', <any>upgradeAdapter.downgradeNg2Component(MyBaseComponent));

@NgModule({
  imports: [BrowserModule, routing],
  providers: [appRoutingProviders, HTTP_PROVIDERS],
  declarations: [MyBaseComponent,
    MyNG2RoutableComponent]
})
class AppModule { }


upgradeAdapter.bootstrap(document.body, ['ng1App']).ready(function(){
  console.log('bootstraped!');
});

我的根 NG2 组件引导程序，因为我可以在它呈现的模板中扔东西。但是似乎当我添加<router-outlet></router-outlet>它时它不会呈现子路由。如果我在没有 upgradeAdapter 的情况下仅引导我的 NG2 应用程序，一切都会按预期工作。

我觉得我只缺少一个连接件。有任何想法吗？

Angular RC.6 和路由器 RC.2 更新

上周我升级到 rc.6 和 rc.2 版本的路由器，同样的问题。当不涉及路由时，UpgradAdapter 工作得很好。一旦我拉入路由器插座，就什么都没有渲染，也没有错误。

4

1 回答 1

4

Angular 路由器至少需要引导一个组件才能被实例化。由于 ngUpgrade 引导 Angular 1 端，因此没有 Angular 2 引导组件。要解决此问题，您必须覆盖ApplicationRef并提供您自己的组件。这是一个工作 plunker 演示如何实现这一点。

http://plnkr.co/edit/Gj8xq0?p=preview

以供参考：

https://github.com/angular/angular/issues/9870

于 2016-09-13T13:30:42.040 回答