Angular 组件间通讯的几种方式

在 Angular 中，组件间通讯是非常重要的一个方面。不同的组件之间需要进行数据传递、事件触发等操作。本文将介绍 Angular 中组件间通讯的几种方式，并提供相应的示例代码。

1. 父子组件间通讯

父子组件间通讯是 Angular 中最常见的一种方式。在父组件中通过属性绑定的方式将数据传递给子组件，子组件通过 @Input() 装饰器接收数据。示例代码如下：

<!-- parent.component.html -->
<app-child [message]="message"></app-child>

<!-- child.component.ts -->
export class ChildComponent {
  @Input() message: string;
}

2. 子父组件间通讯

子父组件间通讯是父子组件间通讯的反向操作。在子组件中通过 @Output() 装饰器声明一个事件，并通过 EventEmitter 触发该事件。父组件通过事件绑定的方式监听该事件并执行相应的操作。示例代码如下：

// javascriptcn.com 代码示例
<!-- child.component.html -->
<button (click)="onClick()">Click me</button>

<!-- child.component.ts -->
export class ChildComponent {
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

<!-- parent.component.html -->
<app-child (clicked)="onChildClick()"></app-child>

<!-- parent.component.ts -->
export class ParentComponent {
  onChildClick() {
    console.log('Child button clicked');
  }
}

3. 兄弟组件间通讯

兄弟组件间通讯需要借助一个共同的父组件或者一个服务。在共同的父组件中通过属性绑定和事件绑定的方式进行数据传递和事件触发。在服务中通过 Subject 或者 BehaviorSubject 发布和订阅事件。示例代码如下：

// javascriptcn.com 代码示例
<!-- parent.component.html -->
<app-child1 [message]="message" (clicked)="onChild1Click()"></app-child1>
<app-child2 [message]="message"></app-child2>

<!-- parent.component.ts -->
export class ParentComponent {
  message = 'Hello';

  onChild1Click() {
    this.message = 'Clicked';
  }
}

<!-- child1.component.ts -->
export class Child1Component {
  @Input() message: string;
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

<!-- child2.component.ts -->
export class Child2Component {
  @Input() message: string;
}

<!-- service.ts -->
@Injectable({
  providedIn: 'root'
})
export class DataService {
  messageSubject = new Subject<string>();

  sendMessage(message: string) {
    this.messageSubject.next(message);
  }

  getMessage(): Observable<string> {
    return this.messageSubject.asObservable();
  }
}

<!-- component1.ts -->
export class Component1 {
  message = 'Hello';

  constructor(private dataService: DataService) {}

  onClick() {
    this.dataService.sendMessage('Clicked');
  }
}

<!-- component2.ts -->
export class Component2 {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getMessage().subscribe(message => {
      this.message = message;
    });
  }
}

总结

Angular 中组件间通讯有多种方式，每种方式都有其适用的场景。在实际开发中，需要根据具体的情况选择合适的方式。同时，组件间通讯也是 Angular 中一个非常重要的知识点，掌握好组件间通讯的方式对于提高 Angular 技能水平有很大的帮助。

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