私はAngular 2の初心者です。私は"カスタムイベントへのバインディング"について勉強しているチュートリアルの例について疑問を抱いています。このサブビューを含めるサブコンポーネントを含めることを定義している。このビューにカスタムイベントバインドについてこのAngular 2チュートリアルがどのくらい正確に機能しますか？
<div class="container">
<app-cockpit
(serverCreated)="onServerAdded($event)"
(blueprintCreated)="onBlueprintAdded($event)">
</app-cockpit>
<hr>
<div class="row">
<div class="col-xs-12">
<app-server-element
*ngFor="let serverElement of serverElements"
[srvElement]="serverElement"></app-server-element>
</div>
</div>
</div>
：
は、だから私は、 app.component.htmlという名前のこの見解を持っている主なコンポーネントを持っています以前のメインビュー、 cockpit.component.htmlファイルの内容：<div class="row">
<div class="col-xs-12">
<p>Add new Servers or blueprints!</p>
<label>Server Name</label>
<input type="text" class="form-control" [(ngModel)]="newServerName">
<label>Server Content</label>
<input type="text" class="form-control" [(ngModel)]="newServerContent">
<br>
<button
class="btn btn-primary"
(click)="onAddServer()">Add Server</button>
<button
class="btn btn-primary"
(click)="onAddBlueprint()">Add Server Blueprint</button>
</div>
</div>
のために提出する2ボタンが含まれていますm。ここで
最初の疑問、私のような何かをして理解していたものから：クリックイベントが発生したとき「、このビューのコントローラに定義されたonAddServer（）メソッドを実行します。
(click)="onAddServer()
のようなものを意味し、 "。
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
/*
EvebtEmitter è un oggetto del framework Angular che permette di emettere i nostri custom events
@Output() decorator usato per passare qualcosa fuori dal component
*/
@Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
@Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();
newServerName = '';
newServerContent = '';
constructor() { }
ngOnInit() {
}
onAddServer() {
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
onAddBlueprint() {
console.log('INTO onAddBluePrint()');
this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
}
このように動作する必要があります：
newServerNameとnewServerContent変数が挿入されたデータが含まれているcoockpit.component.ts私が持っているクラスにそう
、これらの変数が[（ngModel）]の指示に拘束されているため、ユーザーはフォームを使用します。
<input type="text" class="form-control" [(ngModel)]="newServerName">
<input type="text" class="form-control" [(ngModel)]="newServerContent">
上のユーザーのクリックがサーバーボタンonAddServerを（追加）方法がperfromedされ、serverNameのとserverContentとイベントがコンテンツははexternで放出されています
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
だから疑いの余地はない：何が出来事なのか？それは私にはいくつかの情報を含む単純なJsonオブジェクトのようです。
は、第2の疑いがある：は、deorate @output（）デコレータを使用しているためイベントのexternこのコントローラによって発せられるserverCreated。
デフォルト受信者とは何ですか？私のapp.component.tsクラスで、私はこのイベントを処理このメソッドを持っているので、それは親CompoNetをのコントローラである私には思える：（：{serverNameの：文字列、serverContent：文字列} serverData）onServerAdded
{ this.serverElements.push（{ タイプ： 'server'、 名前：serverData.serverName、 内容：serverData。serverContent }）;
私が主成分の観点から、私はアプリ-コックピットコンポーネントは、これらのイベントを投げることを言っていることを言っているようですが、次のとおりです。exatly意味は何 }
親コンポーネント。
私の推論は正しいのですか、何か不足していますか？したがって、この戦略を使用して、子コンポーネントのコンポーネントを親コンポーネントに渡すことができることを意味します。あるいは、親から子へ、それが本当のユースケースシナリオであるかどうかわかりません。