angular5 - 如何从子组件向父组件发送通信？

Question

我仅出于基础或父组件代码的大小和代码组织的原因拆分了组件。所以根据父组件的部分拆分组件。

所以每个子组件都是同一个父组件的每个部分。但我的问题是如何从父组件访问子组件对象？因为我看到的大多数示例都是基于来自父组件的单击事件来查看子组件（如对话框），并且该值被传递回父 html 单击事件并使用发射器和输出参数捕获值。

而在我的情况下，没有这样的点击动作来触发子组件。那么如何将子组件的值传递给父组件呢？

Answer 1

在父组件中

  onDocumentSelect( documentData: IDocument) {
console.log(documentData);
  }

  <app-document [showDocument] = 'displayDocument' (selectDocument)=onDocumentSelect($event)></app-document>

在子组件中：

  @Output() selectDocument: EventEmitter<e.IDocument>;

  @Input() showDocument: boolean;

我在计算 DocumentSource 数据的函数中触发了发射。

this.selectDocument.emit(this.DocumentSource.data);

这里 this.DocumentSource 是在子组件中具有值的数据表，需要在父组件中访问。

除此之外，对于另一个不同类型的字段，我有类似的数据需要从子组件传递给父组件。

页面加载时出现以下错误

TypeError：无法读取未定义的属性“订阅”

Answer 2

在上面的代码片段中，通过将类型更改为 any 解决了这个问题。

在子组件上：

@Output() public selectDocument: EventEmitter<any> = new EventEmitter<any>(); 

在父组件上：

  onDocumentSelect( documentData: any) {
console.log(documentData);
  }