Elternteil lauscht Kind Ereignis nicht in angular2 arbeitet

Question

ich von den Ereignissen vom Kind zum Elternteil mit Kommunikation zu kämpfen,

ich die Methode bin mit dieser Frage hier erwähnt:

How to listen for child event from parent directive in Angular2

das gleiche Verfahren wird in dieser offiziellen Dokumentation für angular2 erklärt:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent

so hier ist meine Elternkomponente Vorlage:

Parent.component.html

<div class="tab-content"> 
    <div id="Mandataire" class="tab-pane fade in active"> 
     <form class="form-inline"> 
      <div> 
      <h5>Informations personnelles</h5> 
      <div> 
       <info-identity (notify)="onNotify($event)"></info-identity> 
      </div> 
      <div> 
       <h5>Date de naissance</h5> 
       <calendar></calendar> 
       <info-mother-name></info-mother-name> 
       <info-language></info-language> 
      </div> 
      </div> 
      <div> 
      <h5>Numéro de téléphone</h5> 
      <phone></phone> 
      </div> 
      <div> 
      <h5>Adresse courriel</h5> 
      <email></email> 
      </div> 
      <div> 
      <h5>Autorisations</h5> 
      <div class="mandatary-personal_info--autorisation"> 
       <toggle></toggle> 
      </div> 
      <button class="btn btn-default pull-right">AJOUTER LE MANDATAIRE</button> 
      </div> 
     </form> 
     </div> 

     <div id="Contact" class="tab-pane fade"> 
     <form class="form-inline"> 
      <h4>Informations personnelles</h4> 
      <info-identity></info-identity> 
      <info-language></info-language> 
      <br> 
      <h4>Numéro de téléphone</h4> 
      <phone></phone> 
      <br> 
      <h4>Adresse courriel</h4> 
      <email></email> 
      <button type="submit" class="btn btn-default pull-right" onsubmit="this.disabled=true;this.value='Sending Request';" disabled>AJOUTER LE CONTACT</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

Parent.component.ts

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

    @Component({ 
     selector: 'mandataire', 
     templateUrl: './mandataire.component.html', 
     styleUrls: ['./mandataire.component.scss'] 
    }) 
    export class MandataireComponent implements OnInit { 

     constructor() { } 

     ngOnInit() { 
     } 

     onNotify(message:string):void { 
     console.log(message); 
     } 

    } 

jetzt habe ich diese Kind-Dateien:

Vorlage für Kindkomponente:

Info-identity.component.html

<div class="form-group info-identity_title"> 
     <h5>Titre</h5> 
     <label for="miss" class="checkbox-field">Mme</label> 
     <input type="radio" class="form-control" [(ngModel)]="title" name="title" id="miss" value="miss" /> 
     <label for="mister" class="checkbox-field">M.</label> 
     <input type="radio" class="form-control" [(ngModel)]="title" name="title" id="mister" value="mister" /> 
    </div> 
    <div class="form-group info-identity_firstname"> 
     <h5>Prénom</h5> 
     <input type="text" class="form-control" [(ngModel)]="firstName" maxlength="25" (keypress)="myFunction()"> 
    </div> 
    <div class="form-group info-identity_lastname"> 
     <h5>Nom</h5> 
     <input type="text" class="form-control" [(ngModel)]="lastName" maxlength="25" (keypress)="myFunction()"> 
    </div> 

Und das ist die Art Skriptdatei für Kind:

Info-identity.component.ts:

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

@Component({ 
    selector: 'info-identity', 
    templateUrl: './info-identity.component.html', 
    styleUrls: ['./info-identity.component.scss'] 
}) 
export class InfoIdentityComponent implements OnInit, OnChanges { 
    @Input() public firstName = ''; 
    @Input() public lastName = ''; 
    public title = ''; 

    @Output() notify: EventEmitter<string> = new EventEmitter<string>(); 

    constructor() { } 

    ngOnInit() { 
    } 

    ngOnChanges(changes){ 
     console.log(changes); 
    } 

    myFunction(){ 
    this.notify.emit('block of info from the nested component'); 
    } 

} 

Das Problem ist jetzt, dass das Ereignis ausgegeben wird, da im Debugger die Anweisung:

this.notify.emit('block of info from the nested component');

wird

ausgeführt

aber die Eltern nicht erhalten die Benachrichtigung.

Hat jemand eine Idee zu diesem Verhalten?

Danke.

Answer 1

Sie müssen die Eingabeparameter im übergeordneten HTML an das untergeordnete Element übergeben.

Mein Kind:

@Component({ 
    selector: 'kg-numberSpinner', 
    templateUrl: 'kgNumberSpinner.component.html', 
    styleUrls: ['kgNumberSpinner.component.css'] 
}) 

export class KgNumberSpinnerComponent implements OnInit { 


    @Input('startValue') curValue: number; 
    @Input() range: number[]; 
    @Input() increment: number; 
    @Input() spinName; 
    @Input() precision: number; 
    @Input() theme: string; 

    @Output() onChanged = new EventEmitter<NumberSpinnerReturn>(); 

Eltern html:

<div class="ui-grid-row form-group formDiv"> 
    <div class="ui-grid-col-4 labelDiv"> 
     <label class="ui-widget labelCheckbox">Carbohydrates:</label> 
    </div> 
    <div class="ui-grid-col-8 spinnerMargin"> 
     <kg-numberSpinner spinName="carbGoal" [range]=[10,50] [increment]=5 [startValue]=20 [precision]=0 (onChanged)="onChanged($event)"></kg-numberSpinner> 
    </div> 
</div> 

Geordnete Komponente:

onChanged(sr: NumberSpinnerReturn) { 
    ... code here I need. 
}