一文详解Angular父子组件间传数据的方法

1. Angular父子组件间传数据的需求

Angular框架中，父子组件是开发过程中经常使用的组件之一。在某些情况下，组件之间需要共享或传递数据。比如，在一个侧边栏组件中，需要根据当前用户信息在导航栏上动态显示菜单，这时就需要在侧边栏中读取用户信息。因此，如何在父子组件之间进行数据传递成为了开发者关注的问题。

2. 父子组件数据传递的方式

在Angular中，父子组件数据传递的方式可以分为：@Input、@Output、@ViewChild和Service等方法。下面，我们将详细介绍这几种方式。

2.1 @Input

@Input是Angular框架提供的一种方式，用于在父组件中向子组件传递数据。使用@Input时，需要在子组件中通过装饰器来进行属性绑定，从而获取父组件中传递的数据。

在父组件中，需要将要传递给子组件的数据绑定到子组件的属性上，如下所示：

// parent.component.html
<app-child [data]="parentData"></app-child>

在子组件中，需要使用@Input装饰器将要接收的属性进行声明，如下所示：

// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() data: any;
}

在使用@Input时，需要注意，在父组件中绑定的属性名需要与在子组件中声明的属性名保持一致，否则无法进行正确的传递。

2.2 @Output

@Output是Angular框架提供的一种方式，用于在子组件中向父组件传递数据。使用@Output时，需要在子组件中声明一个Output对象，并在该对象上定义一个事件，这样当子组件发生某些操作时，就可以触发该事件，从而将数据传递给父组件。

在父组件中，需要在子组件上绑定一个事件，将子组件传递的数据赋值给父组件中的一个属性，如下所示：

// parent.component.html
<app-child (myEvent)="parentData=$event"></app-child>

在子组件中，需要使用@Output装饰器将要传递的事件进行声明，并实例化一个EventEmitter对象，在需要传递数据时，通过调用EventEmitter的emit()方法来触发事件，如下所示：

// child.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() myEvent = new EventEmitter();
  
  sendDataToParent() {
    const data = {name: 'Tom', age: 18};
    this.myEvent.emit(data);
  }
}

在使用@Output时，需要注意，在父组件中定义的事件名称需要与在子组件中声明的事件名称保持一致，否则无法正确进行传递。

2.3 @ViewChild

@ViewChild是Angular框架提供的一种方式，用于在父组件中获取子组件实例，进而通过该实例来访问子组件中的属性和方法从而完成数据的传递。

在父组件中，需要通过ViewChild获取子组件实例，进而访问子组件的属性和方法，如下所示：

// parent.component.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @ViewChild(ChildComponent) child: ChildComponent;
  
  ngAfterViewInit() {
    const data = this.child.data;
  }
}

在子组件中，需要定义一个属性以保存要传递的数据，如下所示：

// child.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  data: object = {name: 'Tom', age: 18};
}

在使用@ViewChild时，需要注意在父组件中定义的ViewChild对象需要与子组件名称进行一致，否则无法正确获取到子组件实例。

2.4 Service

Service也是在Angular框架中进行数据传递的一种方式，它主要是通过依赖注入的方式，在组件之间进行数据共享和通信。Service通常用于存储一些全局数据或状态，以便在其它组件中使用。

在定义Service时，需要在@Service装饰器中定义服务提供者对象，在组件中引入该服务，并定义一个全局变量，通过该变量来访问和操作Service中所存储的数据，如下所示：

// data.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  data: object = {name: 'Tom', age: 18};
}

// parent.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  constructor(private dataService: DataService) {}
  
  ngOnInit() {
    const data = this.dataService.data;
  }
}

3. 总结

以上就是Angular框架中父子组件数据传递的四种方式：@Input、@Output、@ViewChild和Service。我们可以在具体开发中根据实际情况进行选择，以最佳方式完成数据传递。