Bir ana bileşene giriş değeri nasıl aktarılır

Question

Bir girdinin değerini ana bileşene aktarmak istiyorum. Şu anda tüm girdinin ElementRef çocuk bileşenimden gönderiyorum. Bunu yapmanın zarif bir yolu var mı? Demek istediğim, bir referans değil, sadece bir numara göndermem gerekiyor.

Çocuk Bileşen:

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; 

} 

Ana Bileşen:

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

için ebeveyn çocuk bileşeni veri yayan açısal/çekirdekten EventEmitter ve çıkış kullanmak hangi Üst bileşen, olay bağlama yoluyla işleyebilir. Angular 2 kılavuzlarında child to parent component interaction'a bakın. sizin örnekten

:

Çocuk:

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

Veli (not html olay maçlara çocuk bileşeninden Çıkışta özelliği bağlayıcı olduğunu) EventEmitter'u kullanarak bu kodun paylaşımlı linkten yapılabilmesi için kolayca bağlantı kurabilirsiniz. Daha fazla ayrıntı için lütfen link numaralı telefonu kontrol edin.

Çocuk Bileşen Kod

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

Veli Bileşen Kod

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