Question

我有一个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>时，它似乎不会呈现子路由。如果我在没有升级适配器的情况下仅启动我的NG2应用程序，一切都按预期工作。

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

<小时/> Angular RC.6和路由器RC.2更新

我上周升级到rc.6和路由器的rc.2版本，同样的问题。当不涉及路由时，UpgradAdapter非常有用。一旦我拉入路由器插座，就没有任何渲染，也没有错误。

Answer 1

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

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

供参考：

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

使用带路由的ngUpgrade引导Angular 2 rc.6混合应用程序

1 个答案: