Angular 组件通信的方式-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 应用中，组件通信是非常常见的需求。组件通信的方式有很多种，本文将介绍四种常见的方式。

Input 和 Output

Input 和 Output 是 Angular 组件通信的基础。Input 是组件的输入属性，用于从父组件向子组件传递数据。Output 是组件的输出属性，用于从子组件向父组件传递数据。

下面是一个简单的例子：

父组件：

<app-child [name]="name" (greet)="onGreet($event)"></app-child>

export class AppComponent {
  name = 'Angular';
  onGreet(message: string) {
    console.log(message);
  }
}

子组件：

<p>Hello, {{name}}!</p>
<button (click)="greet()">Greet</button>

export class ChildComponent {
  @Input() name: string;
  @Output() greet = new EventEmitter<string>();

  greet() {
    this.greet.emit(`Hello, ${this.name}!`);
  }
}

在这个例子中，父组件通过 Input 属性将 name 数据传递给子组件，子组件通过 Output 属性将 greet 事件传递给父组件。

Service

Service 是 Angular 应用中的单例服务，用于在组件之间共享数据。组件可以通过依赖注入的方式使用 Service。

下面是一个简单的例子：

Service：

@Injectable({ providedIn: 'root' })
export class DataService {
  data = 'Hello, Angular!';
}

父组件：

<p>{{data}}</p>
<button (click)="updateData()">Update Data</button>

// javascriptcn.com 代码示例
export class AppComponent {
  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.data;
  }

  updateData() {
    this.dataService.data = 'Hello, World!';
    this.data = this.dataService.data;
  }
}

在这个例子中，父组件通过依赖注入的方式使用 DataService，从而共享 data 数据。

ViewChild 和 ViewChildren

ViewChild 和 ViewChildren 是 Angular 中用于获取子组件的引用的方式。

ViewChild 获取单个子组件的引用，ViewChildren 获取多个子组件的引用。

下面是一个简单的例子：

父组件：

<app-child></app-child>
<button (click)="updateChild()">Update Child</button>

export class AppComponent {
  @ViewChild(ChildComponent) child: ChildComponent;

  updateChild() {
    this.child.name = 'Angular';
  }
}

子组件：

export class ChildComponent {
  name = 'World';
}

在这个例子中，父组件通过 ViewChild 获取 ChildComponent 的引用，从而可以修改子组件的属性。

RxJS

RxJS 是一个用于处理异步数据流的库，可以用于组件之间的通信。RxJS 中有很多操作符，可以用于处理数据流。

下面是一个简单的例子：

Service：

// javascriptcn.com 代码示例
@Injectable({ providedIn: 'root' })
export class DataService {
  private dataSubject = new BehaviorSubject<string>('Hello, Angular!');
  data$ = this.dataSubject.asObservable();

  updateData(data: string) {
    this.dataSubject.next(data);
  }
}

父组件：

<p>{{data$ | async}}</p>
<button (click)="updateData()">Update Data</button>

// javascriptcn.com 代码示例
export class AppComponent {
  data$ = this.dataService.data$;

  constructor(private dataService: DataService) {}

  updateData() {
    this.dataService.updateData('Hello, World!');
  }
}

在这个例子中，DataService 中使用了 BehaviorSubject 来管理 data 数据流，AppComponent 中通过 async 管道订阅了 data$ 数据流。当点击 Update Data 按钮时，会调用 DataService 的 updateData 方法，从而更新数据流。

总结

本文介绍了四种常见的 Angular 组件通信方式，分别是 Input 和 Output、Service、ViewChild 和 ViewChildren、RxJS。不同的场景可以选择不同的方式进行组件通信。

参考代码：

https://stackblitz.com/edit/angular-component-communication

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657e75d8d2f5e1655d94a054