微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

原文地址:https://www.jb51.cc/js/157845.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐