passieren Variable von Kind zu übergeordneter Komponente, wenn Variablenänderungen auf einem Änderungsereignis basierend Angular

Question

mit Mir versuche, einen Eingangswert von einem Auswahleingang zu übergeben, die ein (ändern) Ereignis mit ihm von Kind-Komponente zu übergeordnetem Elemente zugeordnet ist. Möchten die Variable jedes Mal, wenn die Variable aus der untergeordneten Komponente aktualisiert wird, aktualisiert.

Meine Frage unterscheidet sich von Question aufgrund meiner Variablenänderungen bei einem Änderungsereignis und muss bei jeder Änderung der Variablen aktualisiert werden.

Ich konnte dies mit ViewChild und AfterViewInit herausfinden, aber ich bekomme einen Fehler in der Konsole sagen: ExpressionChangedAfterItHasBeenCheckedError: Ausdruck wurde geändert, nachdem es überprüft wurde. Vorheriger Wert: 'undefiniert'. Aktueller Wert: "Testen".

Figured es eine einfache Möglichkeit, dies zu tun sein muss. Denken Sie daran, dass ich mit Angular noch neu bin.

Child Component Vorlage:

<form> 
    <div class="form-group"> 
    <label for="Master-Products">Select Master Product</label> 
    <select [(ngModel)]="selectedValue" name="pow" (change)="pow = $event.target.value; onKeyUp()" class="form-control" id="Master-Products"> 
     <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> 
    </select> 
    </div> 
</form> 

Kinder Komponente:

export class MasterInputComponent { 
    powers: any[] = [ 'power1', 'power2', 'power3' ]; 
    submitted = false; 
    pow:string = 'Testing'; 
    selectedValue = null; 
    constructor() { } 

    onKeyUp(value): void{ 
    console.log('Value: ',this.pow); 
    } 

Eltern-Component-Vorlage:

<div role="tabpanel" class="tab-pane" id="accessories"> 
    <h1>ACCESSORIES</h1> 
    <h4>Testing: {{power}}</h4> 
    <master-input (change)="recieveMessage($event.target.value)"></master-input> 
    <accessories></accessories> 

Eltern-Komponente:

export class AppComponent implements AfterViewInit{ 
    @ViewChild(MasterInputComponent) child; 
    title = 'Having FUN with Angular'; 
    posts: any[]; 
    power:string; 

    constructor(private service:ProductsService){} 
    ngAfterViewInit(){ 
    this.power = this.child.pow; 
    } 

    recieveMessage(value){ 
    console.log('Event: ',value); 
    this.power = value; 
    console.log('Favorite has changed') 
    } 

Jede Hilfe würde sehr geschätzt werden, danke!

Answer 1

Sie die folgenden Schritte in Ihrem Code:

(ngModelChange) = "onKeyUp ($ event)" statt (ändern) = "pow = $ event.target.value; onKeyUp()"

in Ihrem Kind ts Datei

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

@Output() sendMessage = new EventEmitter(); 

onKeyUp(e) { 
    this.sendMessage.next(e); 
} 

Eltern html

<master-input (sendMessage)="recieveMessage($event)"></master-input> 
    <accessories></accessories> 

der folgende Code wird Ihre Eltern ts

recieveMessage(msg) { 
    console.log('msg', msg) 
} 

Answer 2

Versuchen hinzufügen:

constructor(private service:ProductsService, private cdr: ChangeDetectorRef){} 
ngAfterViewInit(){ 
    this.power = this.child.pow; 
    this.cdr.detectChanges(); 
} 

This link Licht auf die genaue Ursache des Problems werfen.