我无法使用 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 的文档。如果有人知道“JS”(而不是 ts)的良好文档链接，也请提供帮助。
最佳答案
NgModule
Angular2 RC5 引入了 NgModules。根据文档，
Angular Modules help organize an application into cohesive blocks of functionality.
您需要在 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 的文档丰富。您可以查看QuickStart Guide (有关于 NgModule 的附录)或相应的 Typescript chapter .
关于javascript - JS 中的 Angular2 组件通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39009619/