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

前端之家收集整理的这篇文章主要介绍了javascript – 使用带路由的ngUpgrade引导Angular 2 rc.6混合应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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非常有用.一旦我拉入路由器插座,然后没有任何渲染,没有错误.

解决方法

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

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

以供参考:

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

猜你在找的JavaScript相关文章