Angular的@Output与@Input怎么理解

在Angular中，组件之间的通信是一个非常重要的概念。为了实现组件之间的数据传递和交互，Angular提供了@Input和@Output装饰器。这两个装饰器分别用于从父组件向子组件传递数据（@Input）和从子组件向父组件传递事件（@Output）。本文将详细介绍@Input和@Output的使用方法、工作原理以及它们在实际开发中的应用场景。

1. @Input：从父组件向子组件传递数据

@Input装饰器用于将父组件中的数据传递给子组件。通过@Input，父组件可以将数据绑定到子组件的属性上，子组件可以读取这些数据并在模板或逻辑中使用。

1.1 基本用法

假设我们有一个父组件ParentComponent和一个子组件ChildComponent。我们希望在父组件中定义一个变量，并将其传递给子组件。

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = 'Hello from Parent';
}

子组件 (child.component.ts)

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

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

在这个例子中，父组件ParentComponent通过[message]="parentMessage"将parentMessage变量传递给子组件ChildComponent。子组件通过@Input()装饰器接收这个数据，并在模板中使用。

1.2 使用别名

有时候，我们可能希望子组件中的属性名与父组件中的属性名不同。这时，我们可以使用@Input装饰器的别名功能。

子组件 (child.component.ts)

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

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

在这个例子中，父组件仍然使用message属性名传递数据，但子组件中使用childMessage来接收这个数据。

1.3 使用ngOnChanges生命周期钩子

当父组件传递给子组件的数据发生变化时，子组件可以通过ngOnChanges生命周期钩子来监听这些变化。

子组件 (child.component.ts)

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

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

  ngOnChanges(changes: SimpleChanges) {
    if (changes.message) {
      console.log('Message changed:', changes.message.currentValue);
    }
  }
}

在这个例子中，每当父组件传递给子组件的message发生变化时，ngOnChanges方法就会被调用，并且可以通过changes对象获取到变化前后的值。

2. @Output：从子组件向父组件传递事件

@Output装饰器用于将子组件中的事件传递给父组件。通过@Output，子组件可以触发一个事件，并将数据传递给父组件，父组件可以监听这个事件并做出相应的处理。

2.1 基本用法

假设我们有一个子组件ChildComponent，它有一个按钮，当用户点击按钮时，我们希望将事件传递给父组件ParentComponent。

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

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

在这个例子中，子组件定义了一个messageEvent事件，并通过EventEmitter来触发这个事件。当用户点击按钮时，sendMessage方法会被调用，并通过emit方法将消息传递给父组件。

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>{{ message }}</p>
  `
})
export class ParentComponent {
  message: string;

  receiveMessage($event: string) {
    this.message = $event;
  }
}

在这个例子中，父组件通过(messageEvent)="receiveMessage($event)"监听子组件触发的messageEvent事件，并在receiveMessage方法中接收传递过来的数据。

2.2 使用别名

与@Input类似，@Output也可以使用别名来定义事件名称。

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output('childMessageEvent') messageEvent = new EventEmitter<string>();

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

在这个例子中，子组件使用childMessageEvent作为事件名称，父组件可以通过这个名称来监听事件。

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (childMessageEvent)="receiveMessage($event)"></app-child>
    <p>{{ message }}</p>
  `
})
export class ParentComponent {
  message: string;

  receiveMessage($event: string) {
    this.message = $event;
  }
}

2.3 传递复杂数据

@Output不仅可以传递简单的字符串或数字，还可以传递复杂的数据结构，如对象或数组。

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<{ text: string, date: Date }>();

  sendMessage() {
    this.messageEvent.emit({ text: 'Hello from Child', date: new Date() });
  }
}

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>{{ message.text }} - {{ message.date | date }}</p>
  `
})
export class ParentComponent {
  message: { text: string, date: Date };

  receiveMessage($event: { text: string, date: Date }) {
    this.message = $event;
  }
}

在这个例子中，子组件传递了一个包含text和date属性的对象给父组件，父组件接收到这个对象后，可以在模板中显示这些数据。

3. 实际应用场景

3.1 父子组件通信

@Input和@Output最常见的应用场景是父子组件之间的通信。父组件通过@Input将数据传递给子组件，子组件通过@Output将事件传递给父组件。这种模式在构建复杂的UI组件时非常有用，例如表单控件、模态框、选项卡等。

3.2 组件解耦

通过@Input和@Output，我们可以将组件之间的依赖关系降到最低。父组件只需要知道子组件的输入和输出接口，而不需要了解子组件的内部实现。这种解耦的设计使得组件更容易复用和维护。

3.3 动态组件交互

在某些情况下，我们可能需要动态地创建和销毁组件，并通过@Input和@Output来实现组件之间的交互。例如，在一个动态表单中，每个表单控件都是一个独立的组件，父组件可以通过@Input将表单数据传递给子组件，子组件可以通过@Output将用户输入的数据传递给父组件。

4. 总结

@Input和@Output是Angular中实现组件通信的核心机制。通过@Input，父组件可以将数据传递给子组件；通过@Output，子组件可以将事件传递给父组件。这两个装饰器使得组件之间的交互变得更加灵活和高效。在实际开发中，合理使用@Input和@Output可以帮助我们构建出更加模块化、可复用的组件，从而提高代码的可维护性和可扩展性。