详解 Angular 2 中的跨组件通讯及其实现方式-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 2 中，组件是构建 web 应用程序的基本单位。然而，当我们需要在不同的组件之间共享数据或实现组件之间的通信时，就需要使用跨组件通讯。本文将详细介绍 Angular 2 中的跨组件通讯及其实现方式。

基础概念

在 Angular 2 中，有两种类型的组件之间的跨组件通讯：

父子组件之间的通讯：父组件通过属性绑定将数据传递给子组件，并通过事件绑定接收子组件的事件。
非父子组件之间的通讯：使用一个共享的服务来共享数据或实现组件之间的通信。

父子组件之间的通讯

属性绑定

属性绑定是将数据从父组件传递给子组件的最基本的方法。在父组件的模板中，可以使用方括号语法将数据绑定到子组件的属性上，如下所示：

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

在子组件中，可以使用 @Input 装饰器来声明一个输入属性，该属性将接收父组件的数据，如下所示：

// javascriptcn.com 代码示例
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{ childData }}</p>'
})
export class ChildComponent {
  @Input() childData: string;
}

事件绑定

事件绑定是将子组件的事件传递给父组件的方法。在子组件的模板中，可以使用圆括号语法将事件绑定到一个输出属性上，如下所示：

<button (click)="onClick()">Click me</button>

在子组件中，可以使用 @Output 装饰器来声明一个输出属性，该属性将发出一个事件，如下所示：

// javascriptcn.com 代码示例
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<button (click)="onClick()">Click me</button>'
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter();
  
  onClick() {
    this.childEvent.emit('Hello from child!');
  }
}

在父组件的模板中，可以使用圆括号语法将子组件的输出属性绑定到一个方法上，如下所示：

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

在父组件中，可以实现 onChildEvent 方法来接收子组件的事件：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child (childEvent)="onChildEvent($event)"></app-child>'
})
export class ParentComponent {
  onChildEvent(event: string) {
    console.log(event);
  }
}

非父子组件之间的通讯

当需要在非父子组件之间共享数据或实现组件之间的通信时，可以使用一个共享的服务来实现。下面是一个示例：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DataService {
  private data = new Subject<string>();
  
  setData(newData: string) {
    this.data.next(newData);
  }
  
  getData() {
    return this.data.asObservable();
  }
}

在上面的示例中，我们创建了一个 DataService 服务，该服务包含一个名为 data 的私有 Subject 对象，以及两个方法：setData 和 getData。setData 方法用于将新数据发送到 data 对象中，而 getData 方法则返回一个可观察对象，以便订阅者可以获取 data 对象中的数据。

现在，我们可以在需要共享数据或实现组件之间通信的组件中注入 DataService 服务，并使用 setData 和 getData 方法来共享数据或实现通信。下面是一个示例：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-component-a',
  template: '<p>Component A: {{ data }}</p>'
})
export class ComponentA implements OnInit {
  data: string;
  
  constructor(private dataService: DataService) { }
  
  ngOnInit() {
    this.dataService.getData().subscribe(newData => this.data = newData);
  }
  
  setData(newData: string) {
    this.dataService.setData(newData);
  }
}

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-component-b',
  template: '<button (click)="setData()">Set data</button>'
})
export class ComponentB {
  constructor(private dataService: DataService) { }
  
  setData() {
    this.dataService.setData('Hello from Component B!');
  }
}

在上面的示例中，我们在组件 A 中注入了 DataService 服务，并在 ngOnInit 方法中订阅了 data 对象，以便获取来自组件 B 的新数据。同时，我们还定义了一个 setData 方法，该方法使用 setData 方法将新数据发送到 data 对象中。

在组件 B 中，我们同样注入了 DataService 服务，并定义了一个 setData 方法，该方法使用 setData 方法将新数据发送到 data 对象中。

总结

在 Angular 2 中，父子组件之间的通讯可以使用属性绑定和事件绑定来实现，而非父子组件之间的通讯则可以使用一个共享的服务来实现。掌握这些技术可以帮助我们更好地构建 Angular 2 应用程序。

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