javascript - 如何在 Angular 2 Javascript(不是 typescript )中添加子组件

Question

我有一个在 Angular2 RC5 中运行的 hello world 程序，无需 typescript 。第一个组件加载没有错误，但我无法加载子组件。我没有收到任何错误 - 子组件内容只是不渲染/显示。

我也不知道如何将其放在 plunkr 或 codepen 上，因为似乎没有用于 RC 的 CDN。 “npm install”版本位于 https://github.com/dolthead/ng2js .

// app.module.js
(function (app) {

    app.AppModule =
        ng.core.NgModule({
            imports: [ng.platformBrowser.BrowserModule],
            declarations: [app.AppComponent, app.InputListComponent],
            bootstrap: [app.AppComponent]
        })
        .Class({
            constructor: function () {
            }
        });

    document.addEventListener('DOMContentLoaded', function () {
        ng.platformBrowserDynamic
            .platformBrowserDynamic()
            .bootstrapModule(app.AppModule);
    });

})(window.app || (window.app = {}));

// app.component.js
(function (app) {

    app.AppComponent =
        ng.core.Component({
            selector: 'my-app',
            templateUrl: 'app/app.component.html',
            imports: [app.InputListComponent],
            directives: [
              app.InputListComponent, // child component
              ng.common.FORM_DIRECTIVES] // for ngModel
        })
        .Class({
            constructor: function () {
            }
        });

})(window.app || (window.app = {}));

// input-list.component.js - the child component
(function (app) {

    app.InputListComponent =
        ng.core.Component({
            selector: 'input-list',
            templateUrl: 'app/input-list.component.html'
        })
        .Class({
            constructor: function () {
                console.log('input-list constructor');
                var self = this;
                self.status = '';
                self.statusList = [];

                self.addStatus = function() {
                    self.statusList.push(this.status);
                    this.status = '';
                }
            }
        });

})(window.app || (window.app = {}));

Answer 1

这是我如何让 ng-model 与 RC6 一起工作(js，没有 ts)。将表单模块添加到index.html:

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

并在 NgModule 元数据中导入 FormsModule:

// app.module.js
(function (app) {

    app.AppModule =
        ng.core.NgModule({
            imports: [
                ng.platformBrowser.BrowserModule,
                ng.forms.FormsModule
            ],
            declarations: [
                app.AppComponent,
                app.InputListComponent
            ],
            providers: [],
            bootstrap: [app.AppComponent]
        })
        .Class({
            constructor: function AppModule() {
            }
        });

    document.addEventListener('DOMContentLoaded', function () {
        ng.platformBrowserDynamic
            .platformBrowserDynamic()
            .bootstrapModule(app.AppModule);
    });

})(window.app || (window.app = {}));

// app.component.js
(function (app) {

    app.AppComponent =
        ng.core.Component({
            selector: 'my-app',
            templateUrl: 'app/app.component.html',
            imports: [app.InputListComponent]
        })
        .Class({
            constructor: function () {
            }
        });

})(window.app || (window.app = {}));

// input-list.component.js - the child component
(function (app) {

    app.InputListComponent =
        ng.core.Component({
            selector: 'input-list',
            templateUrl: 'app/input-list.component.html'
        })
        .Class({
            constructor: function () {
                console.log('input-list constructor');
                var self = this;
                self.status = '';
                self.statusList = [];

                self.addStatus = function() {
                    self.statusList.push(this.status);
                    this.status = '';
                }
            }
        });

})(window.app || (window.app = {}));