面试题：Angular 组件间通信方式之中等难度

Question

在Angular中，简述父子组件间通过@Input()和@Output()进行通信的原理及使用场景，并给出一个简单的代码示例。

Answer 1

1. 原理

@Input()

• 原理：用于父组件向子组件传递数据。子组件通过在属性前使用@Input()装饰器来声明一个输入属性，父组件在使用子组件标签时，通过属性绑定的方式将数据传递给子组件的该输入属性。这是一种单向数据流动，从父组件流向子组件。

@Output()

• 原理：用于子组件向父组件传递数据或事件。子组件通过@Output()装饰器声明一个事件属性，该属性是一个EventEmitter类型的对象。子组件通过调用EventEmitter的emit()方法来触发事件，并传递数据。父组件在使用子组件标签时，通过事件绑定的方式监听子组件触发的事件，并在事件处理函数中接收子组件传递的数据。这是一种从子组件到父组件的单向数据流动。

2. 使用场景

@Input()

• 场景：当子组件需要依赖父组件的数据来呈现不同的视图或执行不同的逻辑时使用。例如，子组件是一个显示用户信息的卡片，父组件根据不同的用户数据传递给子组件，子组件根据传入的数据进行显示。

@Output()

• 场景：当子组件发生某些事件（如按钮点击、数据修改等），需要通知父组件并传递相关数据时使用。比如，子组件是一个计数器，每次点击增加计数，需要将最新的计数值传递给父组件。

3. 代码示例

子组件（child.component.ts）

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() parentData: string;
  @Output() childEvent = new EventEmitter<string>();

  sendDataToParent() {
    this.childEvent.emit('Data from child');
  }
}

子组件模板（child.component.html）

<div>
  <p>Received from parent: {{parentData}}</p>
  <button (click)="sendDataToParent()">Send data to parent</button>
</div>

父组件（parent.component.ts）

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  dataToChild = 'Initial data from parent';

  handleChildEvent(data: string) {
    console.log('Received from child:', data);
  }
}

父组件模板（parent.component.html）

<app-child [parentData]="dataToChild" (childEvent)="handleChildEvent($event)"></app-child>