入力値を親コンポーネントに渡す方法

Question

入力の値を親コンポーネントに渡したいとします。現在、私は子コンポーネントから入力全体をElementRefに送信しています。これを行うためのエレガントな方法はありますか？つまり、参照番号全体ではなく、1つの番号だけを送る必要があります。

子コンポーネント：

import { Component, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-action-dialog-content', 
    template: ` 
    <md-input-container> 
     <input #amount md-input placeholder="Amount"> 
     <span md-suffix>€</span> 
    </md-input-container> 
    ` 
}) 
export class ActionDialogContentComponent { 

    @ViewChild('amount') amount; 

} 

親コンポーネント：

import { Component, ViewChild } from '@angular/core'; 

import { ActionDialogContentComponent } from './../action-dialog-content/action-dialog-content.component'; 

@Component({ 
    selector: 'app-action-dialog', 
    template: ` 
    <app-action-dialog-content></app-action-dialog-content> 
    <md-dialog-actions> 
     <button md-raised-button (click)="sendData()">ADD</button> 
    </md-dialog-actions> 
    ` 
}) 
export class ActionDialogComponent { 

    @ViewChild(ActionDialogContentComponent) amountInput: ActionDialogContentComponent; 

    sendData() { 
    console.log(this.amountInput.amount.nativeElement.value); 

    } 

} 

Answer 1

あなたは、親に子コンポーネントからのデータを発するように、角度/コアから持つEventEmitterと出力を使用することができます親コンポーネントはイベントバインディングを処理できます。角度2ガイドのchild to parent component interactionを参照してください。あなたの例から

：

子供：

@Component({ 
    selector: 'app-action-dialog', 
    template: ` 
    <app-action-dialog-component (amountChanged)="onAmountChanged($event)"></app-action-dialog-component> 
    <md-dialog-actions> 
     <button md-raised-button (click)="sendData()">ADD</button> 
    </md-dialog-actions> 
    ` 
}) 
export class ActionDialogComponent { 

    onAmountChanged(amount: number) { 
    // do what you want with new value 
    } 
} 

Answer 2

：

export class ActionDialogContentComponent { 

    amount: number; 
    @Output() amountChanged: new EventEmitter<number>(); 

    changeAmount() { //Trigger this call from the child component's template 
    this.amountChanged.emit(this.amount); 
    } 
} 

親（ノートHTMLイベントは、あなたは試合に子コンポーネントから@outputプロパティを結合していること） EventEmitterを使用すると、このコードをリンクから共有することができますので、簡単に参照できるようにしてください。link

子コンポーネントのコード

import { Component, EventEmitter, Input, Output } from '@angular/core'; 
@Component({ 
    selector: 'my-voter', 
    template: ` 
    <h4>{{name}}</h4> 
    <button (click)="vote(true)" [disabled]="voted">Agree</button> 
    <button (click)="vote(false)" [disabled]="voted">Disagree</button> 
    ` 
}) 
export class VoterComponent { 
    @Input() name: string; 
    @Output() onVoted = new EventEmitter<boolean>(); 
    voted = false; 
    vote(agreed: boolean) { 
    this.onVoted.emit(agreed); 
    this.voted = true; 
    } 
} 

親コンポーネントのコード

import { Component }  from '@angular/core'; 
@Component({ 
    selector: 'vote-taker', 
    template: ` 
    <h2>Should mankind colonize the Universe?</h2> 
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3> 
    <my-voter *ngFor="let voter of voters" 
     [name]="voter" 
     (onVoted)="onVoted($event)"> 
    </my-voter> 
    ` 
}) 
export class VoteTakerComponent { 
    agreed = 0; 
    disagreed = 0; 
    voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']; 
    onVoted(agreed: boolean) { 
    agreed ? this.agreed++ : this.disagreed++; 
    } 
}