Jak przekazać wartość wejściową do komponentu nadrzędnego

Question

Chcę przekazać wartość danych wejściowych do komponentu nadrzędnego. Obecnie wysyłam cały plik wejściowy ElementRef z mojego komponentu potomnego. Czy istnieje elegancki sposób na robienie tego? Mam na myśli, że muszę wysłać tylko jeden numer, a nie cały odnośnik.

Komponent dziecka:

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; 

} 

nadrzędna Składnik:

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

Można użyć EventEmitter i wyjście z kątowym/rdzenia emitować dane z komponentu dziecka do rodzica, który komponent nadrzędny może następnie obsłużyć wiązanie zdarzeń. Zobacz child to parent component interaction w przewodnikach Angular 2.

ze swojego przykład:

dziecka:

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); 
    } 
} 

nadrzędna (uwaga, że ​​zdarzenie html jesteś wiążące do meczów właściwość @Output z komponentu dziecko):

@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

możesz użyć EventEmitter, aby zrobić ten kod z udostępnionego linku, aby można go było łatwo sprawdzić. Aby uzyskać więcej informacji, przeczytaj ten link

Komponent Dziecko Code

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; 
    } 
} 

nadrzędna Komponent

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++; 
    } 
}