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>

这是child的类型脚本文件：

信息-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.
}

父级侦听不在angular2中工作的子事件

1 个答案: