笔记大全

Angular中非父子组件间如何通讯

更新时间：2023-06-25

前言

在Angular中，组件是构建应用程序的基本模块。与其他编程框架一样，有时需要组件之间进行通信。Angular提供了几种方法来实现非父子组件之间的通讯。本文将介绍这些通讯方式，并提供代码示例。

1. 使用服务(Service)

服务是Angular中用于共享数据和逻辑的常见方式。您可以创建一个服务来处理非父子组件之间的通讯。服务可以注入到需要通讯的组件中，并使用观察者模式实现订阅和发布事件。

// service.ts文件
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new Subject();  // 创建一个Subject对象
  public message$ = this.messageSource.asObservable();  // 创建一个可观察对象

  constructor() { }

  sendMessage(message: string) {
    this.messageSource.next(message);  // 发布事件
  }
}

使用服务的组件需要注入该服务，并订阅消息。

// component1.ts文件
import { Component } from '@angular/core';
import { DataService } from '../service';

@Component({
  selector: 'app-component1',
  template: `
    
  `,
})
export class Component1 {
  constructor(private dataService: DataService) { }

  sendMessage() {
    this.dataService.sendMessage('Hello from Component1!');
  }
}

// component2.ts文件
import { Component } from '@angular/core';
import { DataService } from '../service';

@Component({
  selector: 'app-component2',
  template: `
    {{ message }}
  `,
})
export class Component2 {
  public message: string;

  constructor(private dataService: DataService) {
    this.dataService.message$.subscribe(message => {
      this.message = message;  // 订阅消息
    });
  }
}

2. 使用@Input和@Output装饰器

通过@Input和@Output装饰器，可以在不同组件之间传递数据。@Input装饰器用于接收父组件传递的数据，@Output装饰器用于向父组件发送数据。

// parent-component.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    
  `
})
export class ParentComponent {
  public parentMessage = 'Hello from Parent!';

  receiveMessage(message: string) {
    console.log(message);
  }
}

// child-component.ts文件
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `
    {{ message }}
    
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

3. 使用RxJS的Subject

除了在服务中使用RxJS的Subject来实现通讯外，您还可以直接在组件中使用Subject来实现非父子组件之间的通讯。

// component1.ts文件
import { Component } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-component1',
  template: `
    
  `
})
export class Component1 {
  public messageSource$ = new Subject();

  constructor() { }

  sendMessage() {
    this.messageSource$.next('Hello from Component1!');
  }
}

// component2.ts文件
import { Component } from '@angular/core';
import { Component1 } from './component1';

@Component({
  selector: 'app-component2',
  template: `
    {{ message }}
  `
})
export class Component2 {
  public message: string;

  constructor(private component1: Component1) {
    this.component1.messageSource$.subscribe(message => {
      this.message = message;
    });
  }
}

4. 使用第三方库

除了上述方法，您还可以使用一些第三方库来实现非父子组件之间的通讯，如ngxs和ngrx等。这些库提供了更高级的状态管理和通讯机制，可根据实际需求选择使用。

c语言编程笔录