Angular parent 组件监听一个 ng-content child 组件

Question

我想要一个函数在我的 parent 组件发出事件时在我的 parent 组件中触发。 child 组件通过 ng-content 传递到 parent。我简化了我想做的事情的代码，但我似乎无法让 child 发送到 parent。我想用 ng-content 传递 child 因为 child 组件可以是多种组件而不是 1 个特定的

示例：

main.ts

<parent-component>
  <child-component></child-component>
</parent-component>

parent.component.ts

<div>
 {{ this.value }}
 <ng-content (updated)="updateParentValue()"></ng-content> <-- this doesn't work
</div>

updateParentValue(value) {
  this.value = value;
}

child.component.ts

<div>
  <span (click)="updateStuff()">update</span>
</div>

@Output() updated = new EventEmitter();

updateStuff() {
  // Stuff
  this.updated.emit(this.value);
}

Answer 1

谢谢 Krim，解决了 link

main.ts

<parent-component>
  <child-component></child-component>
</parent-component>

parent.component.ts

<div>
 {{ this.value }}
 <ng-content></ng-content>
</div>

@ContentChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

ngAfterViewInit() {
   this.childComponents.forEach((childComponent: ChildComponent) => {
       childComponent.updated.subscribe((item) => this.updateParentValue(item));           
   });
}

updateParentValue(value) {
  this.value = value;
}

child.component.ts

<div>
  <span (click)="updateStuff()">update</span>
</div>

@Output() updated = new EventEmitter();

updateStuff() {
  // Stuff
  this.updated.emit(this.value);
}

Angular parent 组件监听一个 ng-content child 组件

Angular parent component listen to a ng-content child component

angular

angular5

angular6