Question

我之所以拆分组件只是因为基本或 父组件 代码的大小和代码组织的增长。因此，请根据 父组件 的各个部分拆分组件。

因此，每个 子组件 是同一 父组件 的每个部分。但我的问题是如何从 父组件 访问 子组件 对象？因为我看到的大多数示例都是基于 父组件 的点击事件来查看 子组件 （ like dialog ）并将值传递回父html click事件，并使用emitter和output参数捕获值。

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

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数据的函数中触发emit。

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

这里this.DocumentSource是dataTable，它在Child组件中具有值，需要在父组件中访问。

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

页面加载时出现以下错误

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

Answer 2

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

关于子组件：

＆＃13;

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

＆＃13;

在父组件上：

＆＃13;

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

＆＃13;

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

2 个答案: