你好同事们，我是Angular 4的新手 . 我在Angular 4中遇到了一个典型的子父交互案例 . 我有一个子组件（uw-post-feed.component）和父组件（uw-board-page.component），我在那里发出一些数据我的父母应该听的，我已经定义了一个简单的函数和一个console.log供我父母监听，我的控制台没有显示任何错误，但是父组件没有监听子组件正在抛出的内容 . 我的孩子组件看起来像这样 .

这些是我的步骤：

  • 导入输出和事件 Launcher

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

uw-post-feed.component.html（子组件）看起来像这样

<button (click) = "hitIT()">test button</button>
  • 在uw-post-feed.component.ts（子组件打样文件）中定义输出装饰器：

导出类UwPostFeedComponent扩展FrPostFeedComponent实现OnInit {

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

  constructor() {
    super();
  }

  hitIT(){
 console.log('reacxhed');
 this.pullExtraPosts.emit('my emitted data');
 }
}

3.单击按钮时，触发hitIT（）函数 .

  • 在我的父组件HTML文件中：

< uw-post-feed (pullExtraPosts)="extraPosts($event)"></uw-post-feed>{{childEvent}}

  • 在我的父组件TS文件中，将执行pullExtraPosts的操作：

extraPosts（data）：void {console.log（'hit it'）; console.log（'event'，data）; }

现在我也尝试调试代码，但由于某种原因调试器没有跨越我的 this.pullExtraPosts.emit('my emitted data'); 可能的原因，这就是停止extraPosts（）被触发可能是我父和子组件的绑定 . 在我的第4步中是否存在我做错的事情 . 欢迎任何建议或帮助 . 提前致谢 .

angular typescript angular2-template