angular 将子组件的值和方法传递给父组件

在Angular中，可以通过使用@Output装饰器和EventEmitter来将子组件的值和方法传递给父组件。

首先，在子组件中，使用@Output装饰器来声明一个事件，并创建一个EventEmitter实例来触发该事件。例如：

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
export class ChildComponent {
  @Output() clicked = new EventEmitter();

  onClick() {
    this.clicked.emit('Button clicked!');
  }
}

在上面的代码中，我们声明了一个名为clicked的事件，并在点击按钮时触发该事件，并传递一个字符串参数。

然后，在父组件中，使用子组件的标签，并使用(click)="方法名"来监听该事件，并在方法中处理子组件传递的值。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child (clicked)="onChildClick($event)"></app-child>
    <p>Message from child: {{message}}</p>
  `
})
export class ParentComponent {
  message: string;

  onChildClick(message: string) {
    this.message = message;
  }
}

在上面的代码中，我们监听了子组件的clicked事件，并在onChildClick方法中处理子组件传递的值，并将其赋值给message变量，然后在模板中显示出来。

这样，子组件的值和方法就成功地传递给了父组件。