【问题标题】:Bootstrapping an Angular 2 rc.6 hybrid app using ngUpgrade with routing使用带有路由的 ngUpgrade 引导 Angular 2 rc.6 混合应用程序
【发布时间】:2016-12-26 17:38:56
【问题描述】:

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

我觉得我只缺少一个连接部分。有什么想法吗?


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

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

【问题讨论】:

  • 您是否将路由器指令添加到组件的“指令”属性装饰器中?从那里import {ROUTER_DIRECTIVES} from '@angular/router';
  • @OlegBarinov 我只是试了一下,但仍然没有。我认为路由器指令将在模块级别处理?按照 angular.io 指南,我在 app.routing.ts 中设置路由并利用 RouterModule.forRoot() 函数,然后在我的模块的导入中使用该函数。无论哪种方式,直接导入指令似乎都没有帮助。
  • 上周我升级到 rc.6,同样的问题。当不涉及路由时,UpgradAdapter 工作得很好。一旦我拉入路由器插座,就什么都没有渲染,也没有错误。

标签: javascript angular angular-routing ng-upgrade


【解决方案1】:

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

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

供参考:

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

【讨论】:

  • 这正是我想要的!谢谢!我知道必须有一些神奇的连接酱,因为没有抛出错误。我确信文档很快就会更新,但这会阻止我们将应用程序更新到最新的 rc。
  • Angular 2.1.0 和更高版本不再需要这个 - 最好更新这个答案来达到这个效果。
  • 太棒了。几天来我一直在寻找这个解决方案。五年后,这仍然适用于 Angular 12
猜你喜欢
  • 2016-05-23
  • 2018-11-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-12
  • 1970-01-01
  • 2017-12-14
相关资源
最近更新 更多