角度中的 @Input 和 @Output - Javascript

在 Angular 中，我们经常需要在组件之间传递数据。这时候，@Input 和 @Output 就要出场了。

@Input

在 Angular 中，@Input 装饰器允许你将属性绑定到父组件的模板中。

假设我们有一个 ChildComponent：

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

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

通过 @Input 装饰器，我们可以将 title 和 content 属性绑定到父组件：

<app-child [title]="title" [content]="content"></app-child>

@Output

@Output 装饰器允许我们在组件中创建自定义事件。当该事件被触发时，我们可以向父组件传递数据。

假设我们有一个 ChildComponent，它有一个按钮，当点击按钮时，我们想要向父组件传递一个事件：

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
export class ChildComponent {
  @Output() myEvent = new EventEmitter();

  onClick() {
    this.myEvent.emit('Hello from ChildComponent!');
  }
}

通过 @Output 装饰器，我们创建了一个名为 myEvent 的自定义事件，并将其绑定到父组件：

<app-child (myEvent)="onMyEvent($event)"></app-child>

在父组件中，我们可以使用 onMyEvent 方法来接收从 ChildComponent 传递过来的数据：

onMyEvent(event: string) {
  console.log(event); // 输出：Hello from ChildComponent!
}

@Input 和 @Output 是 Angular 组件中非常重要的两个装饰器，它们为我们传递数据和创建自定义事件提供了很大的帮助。在实际开发中，我们需要经常使用它们。