如何在Angular2 Javascript中添加子组件(没有typescript)

How to add a child component in Angular2 Javascript (no typescript)

本文关键字：组件没有 typescript 添加 Angular2 Javascript 更新时间：2023-09-26

我有一个在Angular2 RC5中运行的hello world程序，没有typescript。第一个组件加载时没有错误，但我无法加载子组件。我没有得到任何错误——子组件内容只是没有呈现/显示。

我也不知道如何把它放在plunkr或codependency上，因为似乎没有rpc的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 = {}));

这是我如何让ng-model与RC6 (js, no ts)一起工作的。将forms模块添加到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 = {}));