NgModules

Question

我无法使用JS在Angular 2中的两个组件之间进行通信。 This是教程的链接。我想我错过了一些指令。我试图用声明来改变它

这是app.main.js

(function () {

var Component = ng.core.Component
var bootstrap = ng.platformBrowserDynamic.bootstrap

var RandomComponent = Component({
    selector: 'random-component',
    template: `
        <h2> Hsdsdffdsdfi <h2>
        `
}).Class({
    constructor: function() {
        //empty
    }
});

var AppComponent = Component({
    selector: 'main-app',
    directives: [RandomComponent],
    template: `
        <h1> Hi {{username}}<h1>
        <random-component></random-component>
        `
}).Class({
    constructor: function() {
        //empty
        this.username = "Username"
    }
});

document.addEventListener('DOMContentLoaded', function(){
    bootstrap(AppComponent);
});

}）（）;

这是index.html

<html>
   <head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <main-app>Loading....</main-app>
  </body>

</html>

我目前正在使用Angular 2 RC5，并且不希望转到ts。我也找不到任何关于JS的文档。如果有人知道＆＃39; JS＆＃39;的良好文档链接（不是ts），请帮助。

Answer 1

NgModules

Angular2 RC5引入了NgModules。根据文件，

Angular Modules有助于将应用程序组织成具有凝聚力的功能块。

您需要在Angular应用程序中定义至少一个模块。您还应该引导该（root / main）模块而不是组件（在您的情况下为AppComponent）。

另一个变化是声明组件和指令的方式。现在，您可以使用声明属性在模块中列出它们，而不是在每个组件中使用指令属性。

这是工作解决方案：

(function () {
    var Component = ng.core.Component
    var NgModule = ng.core.NgModule;
    var BrowserModule = ng.platformBrowser.BrowserModule;
    var bootstrap = ng.platformBrowserDynamic;

    var AppComponent = Component({
        selector: 'main-app',
        template: `
            <h1>Hi {{username}}</h1>
            <random-component></random-component>
            `
    }).Class({
        constructor: function() {
            this.username = 'Username';
        }
    });

    var RandomComponent = Component({
        selector: 'random-component',
        template: `
            <h2>Random title<h2>
            `
    }).Class({
        constructor: function() { }
    });

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

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

教程

不幸的是，关于Javascript的Angular 2.0文档肯定没有关于Typescript的文档那么丰富。您可以查看QuickStart Guide（有关NgModule的内容和附录）或相应的Typescript chapter。

JS

1 个答案:

NgModules

教程