父子组件传值的方式有哪些

父子组件传值的方式主要有属性绑定、事件绑定、服务共享、状态管理库，以及特殊的Angular策略例如 @Input() 和 @Output() 装饰器。属性绑定允许父组件将数据通过属性的形式传递给子组件，而事件绑定允许子组件将数据通过事件触发的方式传递回父组件。服务共享使用Angular的服务和依赖注入系统，让父子组件通过同一个服务进行通信。状态管理库例如NgRx或者Akita，提供了更复杂的状态管理和通信机制。而@Input() 和 @Output() 是Angular特有的装饰器，用于在父子组件间显式声明数据流向。

一、属性绑定（PROPERTY BINDING）

在父子组件传值中，属性绑定经常被用来从父组件向子组件传递数据。@Input()装饰器在子组件中被用来声明接收来自父组件的数据。父组件只需要通过子组件的选择器，并将数据绑定到相应的属性上即可。属性绑定是单向的，只能从父组件流向子组件。

例如，父组件有一个名称为 parentData 的属性，那么可以通过如下方式将其传递给子组件：

<app-child [childProperty]="parentData"></app-child>

在子组件中，使用 @Input() 接收父组件传来的值：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<h1>{{ childProperty }}</h1>`
})
export class ChildComponent {
  @Input() childProperty: any;
}

二、事件绑定（EVENT BINDING）

另一种常见的传递信息方式是通过事件绑定。这种方法允许子组件通过事件向父组件发送信息。使用@Output() 装饰器和 EventEmitter，在子组件中创建一个可触发事件的实例来实现这一点。

子组件中的代码可能如下：

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent()">Send to Parent</button>`
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();
  sendToParent() {
    this.childEvent.emit('Data from child');
  }
}

父组件在模板里监听这个事件，从而接收数据：

<app-child (childEvent)="receiveFromChild($event)"></app-child>

并在父组件类中定义 receiveFromChild 方法来处理接收到的数据。

三、服务共享（SERVICE SHARING）

使用服务（Service）是实现父子组件之间复杂通信的一种方式，特别是在跨多层级组件时尤其有用。通过在服务中定义可观察对象（Observable），组件可以订阅这些对象并在数据变化时获得通知。

创建一个简单的服务如下：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private dataSource = new BehaviorSubject<any>(null);
  data = this.dataSource.asObservable();
  updateData(data: any) {
    this.dataSource.next(data);
  }
}

组件中通过注入这个服务，可以更新数据或者订阅这个数据流，以此来实现通信。

四、状态管理库（STATE MANAGEMENT）

在Angular中，可以使用状态管理库如NgRx、NgXS或者Akita来管理和传递不同组件之间的状态。状态管理库提供了一个中央仓库，用来存放应用中的状态，并允许各个组件以一种更为规范和可预测的方式进行通信和状态共享。

使用NgRx时的示例代码结构如下：

// Action定义
export const ActionTypes = {
  UpdateData: '[Parent Component] Update Data'
};
export class UpdateDataAction implements Action {
  readonly type = ActionTypes.UpdateData;
  constructor(public payload: any) {}
}
// Reducer处理Action
export function dataReducer(state: any = {}, action: UpdateDataAction) {
  switch (action.type) {
    case ActionTypes.UpdateData:
      return { ...state, data: action.payload };
    default:
      return state;
  }
}
// 在组件中派发Action
dispatch(new UpdateDataAction(someData));
// 在组件中选择状态
select(state => state.data).subscribe(data => ...);