TS 父组件获取子组件的数据和方法

在Angular中，父组件可以通过@ViewChild装饰器来获取子组件的数据和方法。以下是一个简单的例子：

子组件（child.component.ts）:

import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <p>子组件数据：{{ data }}</p>
    <button (click)="childMethod()">调用子组件方法</button>
  `
})
export class ChildComponent {
  data = '子组件数据';
 
  childMethod() {
    console.log('子组件的方法被调用');
  }
}

父组件（parent.component.ts）:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
 
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="parentMethod()">调用父组件方法</button>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) child: ChildComponent;
 
  parentMethod() {
    console.log(this.child.data); // 获取子组件数据
    this.child.childMethod(); // 调用子组件方法
  }
}

在父组件中，我们使用@ViewChild(ChildComponent)来获取子组件的实例，然后可以通过这个实例访问子组件的数据和方法。在parentMethod中，我们访问了子组件的data属性和childMethod方法。