angular组件通信方式

Angular组件间通信的方式主要有以下几种：

1. 父组件向子组件传递数据：通过属性绑定（@Input）。
2. 子组件向父组件传递数据：通过事件绑定（@Output）和EventEmitter。
3. 兄弟组件通信：使用服务（Service）或者提供一个中间人服务来共享信息。
4. 任意组件间通信：使用@angular/core的EventEmitter和Subject。
5. 使用localStorage或sessionStorage共享数据。
6. 使用ngrx/store进行状态管理。

以下是使用@Output和EventEmitter的示例代码：

父组件（parent.component.ts）:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  template: `
    <app-child (childEvent)="receiveMessage($event)"></app-child>
    <p>从子组件接收的消息: {{ messageFromChild }}</p>
  `
})
export class ParentComponent {
  messageFromChild: string;
 
  receiveMessage(message: string) {
    this.messageFromChild = message;
  }
}

子组件（child.component.ts）:

import { Component, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">发送消息给父组件</button>
  `
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();
 
  sendMessage() {
    this.childEvent.emit('Hello from Child!');
  }
}

在这个例子中，子组件通过childEvent发射事件，父组件通过模板绑定接收这个事件。当按下按钮时，子组件发出一个消息，父组件接收这个消息并将其显示出来。