家長監聽子女事件angular2

Question

我從孩子到家長與事件掙扎通信不工作，

我用了這個問題，這裏提到的方法：

How to listen for child event from parent directive in Angular2

同樣的方法是這樣的官方文檔中解釋了angular2：

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

所以這裏是我的父組件的模板：

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

    } 

現在我有這些子文件：

兒童組件模板：

信息，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> 

這是孩子式的腳本文件：

信息-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'); 
    } 

} 

現在的問題是事件被髮射，因爲在調試器中聲明：

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

執行

但家長沒有收到通知。

有沒有人對此行爲有所瞭解？

謝謝。

Answer 1

您需要將父html中的輸入參數傳遞給子項。

我的孩子：

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

父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> 

父組件：

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