JS中的Angular2組件通信

Question

我無法使用JS在Angular 2中的兩個組件之間進行通信。 這是教程的鏈接。 我想我缺少指令。 我也嘗試通過聲明來更改它

這是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的任何文檔。 如果有人知道'JS'（不是ts）的良好文檔鏈接，請也提供幫助。

Answer 1

Ng模塊

Angular2 RC5引入了NgModules。 根據文檔，

Angular模塊有助於將應用程序組織為功能緊密的模塊。

您需要在Angular應用程序中至少定義一個模塊。 您還應該引導該（根/主）模塊而不是組件（在您的情況下為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的文檔豐富。 您可以查看快速入門指南（有關NgModule的信息和附錄）或相應的Typescript章節。

JS中的Angular2組件通信

問題描述

1 個解決方案

解決方案1
2 已采納 2016-08-18 07:58:41

Ng模塊

講解

JS中的Angular2組件通信

問題描述

1 個解決方案

解決方案1 2 已采納 2016-08-18 07:58:41

Ng模塊

講解

解決方案1
2 已采納 2016-08-18 07:58:41