如何在混合应用程序中将模块升级到Angular 2 RC5 NgModules？-Java 学习之路

我有一个hybrid Angular 1+2 application，我在跟踪Angular 2 RC5 guidance in relation to the new NgModules时遇到了问题 . 它看起来好像是用于Angular 2 RC4应用程序 - 而不是混合应用程序 .

与纯RC4方案相比 - 没有模块，因为它们仅在RC5中引入 - 我有一个我需要处理的现有Angular 1.5模块 . 我猜我有以下选择 - 还有其他吗？

使用Upgrade Adapter升级现有模块 . 没有提到那里升级模块但是它们被添加得很晚，所以可能还有文档需要更新？或者也许我们可以期待很快就能加入对此的支持？
将现有模块重写为RC5 NgModule . 有没有关于如何做到这一点的指导？

然后是引导问题 . 我假设混合应用程序需要使用upgrade_adapter进行自举 . 我如何与Update your bootstrap指导协调一致，该指导说我应该使用platformBrowserDynamic（） . bootstrapModule（）函数？

Update: lekev87提供了一个指向Angular文档中示例的链接，该示例似乎已更新为至少部分地考虑了RC5中NgModule的引入 .

在创建UpgradeAdapter实例时，会传入对NgModule的引用 . 但是没有解释这将做什么 .

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));

我的猜测是传入的NgModule将被用来代替implicitly created one .

- We create an implicit NgModule for you as part of the bootstrap()
 - command We automatically hoist your components, pipes, and directives

并且这将使我负责照顾上面列表中的第二点 - 声明所有组件等 .

我在这里走在正确的轨道上吗？

这是否意味着虽然我的应用程序是混合的，但我需要在Angular 1和Angular 2模块中声明所有内容？

有没有办法让我可以访问隐式创建的模块呢？我认为这将允许我从一个拥有我需要的大部分内容的基础开始，我可以以某种方式扩展它？

2 回答

您好，在这里您可以查看UpgradeAdapter class的文档 . 您有这个例子：

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
var module = angular.module('myExample', []);
module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2));
module.directive('ng1Hello', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});
@Component({
  selector: 'ng2-comp',
  inputs: ['name'],
  template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
  directives:
})
class Ng2Component {
}
@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
  imports: [BrowserModule]
})
class MyNg2Module {}
document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

回复于 2024-04-25T21:46:59+08:00

我能够使用更新的docs引入NgModule . 我使用以下模板作为新的NgModule .

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [ BrowserModule ]
})
export class AppModule {}

我将对它的引用传递给UpgradeAdapter的构造函数的参数 .

import { UpgradeAdapter } from '@angular/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter(AppModule);

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});

回复于 2024-04-25T21:46:59+08:00

如何在混合应用程序中将模块升级到Angular 2 RC5 NgModules？

2 回答

相关问题