父进程侦听未在angular2中工作的子事件

我正努力通过孩子与家长之间的事件进行沟通

我在使用这个问题中提到的方法：

angular2的官方文件中解释了相同的方法：

下面是我的父组件模板：

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>

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

现在我有了这些子文件：

子组件的模板：

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

}

info identity.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>

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

乳头
夫人
M
名词
笔名

这是子脚本文件的类型：

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

}

从'@angular/core'导入{Component，OnInit，Input，OnChanges，Output，EventEmitter}；
@组成部分({
选择器：“信息标识”，
templateUrl:'./info identity.component.html'，
样式URL:['./info-identity.component.scss']
})
导出类InfoIdentityComponent实现OnInit、OnChanges{
@Input（）public firstName=''；
@Input（）public lastName=''；
公开名称=“”；
@Output（）notify:EventEmitter=neweventemitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
ngOnChanges（更改）{
控制台日志（更改）；
}
myFunction（）{
this.notify.emit（'来自嵌套组件的信息块'）；
}
}

现在的问题是发出了事件，因为在调试器中有以下语句：

this.notify.emit（'来自嵌套组件的信息块'）

被处决

但家长没有收到通知

有人知道这种行为吗

谢谢。
您需要将父html中的输入参数传递给子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>();

这通常是有效的。你能尝试在Plunker中复制吗（请删除所有不一定要复制问题的代码和HTML）。好的，我将尝试简短地添加Plunker。在Plunker中复制似乎不容易，a必须为项目重新创建“所有”目录层次结构。你只需要2个基本组件即可复制。如果错误在您的项目中的“某处”，nobofy在此将能够帮助您。正如Günter所说，它工作正常，与OP所做的有什么区别？您需要在父组件html中添加：“（onChanged）=“onChanged（$event）”，引用子组件html。有关更多信息，请参阅此链接：