我有一个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
以供参考: