如何从 ES5 引导 angular2 组件？

Question

我有一个香草 ES5 脚本，我试图在运行时创建一个 angular2 组件并像这样引导它，

var mycomp = require('complibrary').mycomponent;
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(mycomp);
});

考虑一下 complibrary 是我们内部开发的一个单独的 angular2 组件库。 mycomponent 是我们导出以供 ES5 代码使用的组件之一。我们正在使用汇总来吐出我们组件的最终 umd 定义。 mycomponent 的摘录如下所示。

var mycomponent = (function () {
function mycomponent() {
    this.name = "Abhang Rane";
}
mycomponent = __decorate([
    _angular_core.Component({
        selector: 'mycomponent',
        template: '<h1>{{name}}</h1>'
    }),
    __metadata('design:paramtypes', [])
], mycomponent);
return mycomponent;
}());

这适用于 angular 2.0.0.rc1，但对于 angular 2.2 及更高版本，platformBrowserDynamic 上没有可用的引导方法。有什么方法可以通过最新的 Angular 2 构建来实现这一点？最好不要更改 mycomponent...

Answer 1

Angular modules 在 Angular 2.0.0 RC5 中被引入，作为 AngularJS 模块的直接继承者。

如this ES5 example所示，是：

platformBrowserDynamic().bootstrapModule(AppModule);

并且应该被引导的组件应该定义一个相应的模块：

var AppModule = NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
.Class({ constructor: function () {} });