Angular 2：什么是 @Input@Output 别名

typescript

Angular 2：什么是 @Input/@Output 别名？

Angular 2 是一个流行的前端框架，用于构建现代化的Web应用程序。其中一个关键的特性是组件之间的通信。在Angular中，我们可以使用@Input和@Output装饰器来实现组件之间的输入和输出。

什么是@Input装饰器？

@Input装饰器是Angular中的一个装饰器，用于将属性标记为输入属性。通过使用@Input装饰器，我们可以将父组件中的数据传递给子组件。子组件可以通过访问这些输入属性来获取父组件传递的数据。

让我们来看一个简单的例子。假设我们有一个父组件和一个子组件。父组件有一个名为name的属性，我们想将这个属性的值传递给子组件。

typescript
// 父组件
@Component({
  selector: 'app-parent',
  template: <code>
    <app-child [childName]="name"></app-child>
  </code>
})
export class ParentComponent {
  name = 'John';
}
// 子组件
@Component({
  selector: 'app-child',
  template: <code>
    <h2>Child Component</h2>
    
Child Name: {{ childName }}
  </code>
})
export class ChildComponent {
  @Input() childName: string;
}

在上面的例子中，父组件通过使用方括号语法将name属性绑定到子组件的childName输入属性上。子组件通过使用@Input装饰器来声明childName属性作为一个输入属性。当父组件的name属性的值发生变化时，子组件会自动更新并显示最新的值。

什么是@Output装饰器？

@Output装饰器是Angular中的一个装饰器，用于将属性标记为输出属性。通过使用@Output装饰器，我们可以在子组件中触发一个事件，并将数据传递给父组件。

让我们继续上面的例子，假设我们想在子组件中添加一个按钮，并在按钮点击时触发一个事件，将子组件的数据传递给父组件。

typescript
// 子组件
@Component({
  selector: 'app-child',
  template: <code>
    <h2>Child Component</h2>
    
Child Name: {{ childName }}
    <button (click)="onClick()">Click Me</button>
  </code>
})
export class ChildComponent {
  @Input() childName: string;
  @Output() dataEvent = new EventEmitter<string>();
  onClick() {
    this.dataEvent.emit(this.childName);
  }
}
// 父组件
@Component({
  selector: 'app-parent',
  template: <code>
    <app-child [childName]="name" (dataEvent)="onDataEvent($event)"></app-child>
  </code>
})
export class ParentComponent {
  name = 'John';
  onDataEvent(data: string) {
    console.log('Received data:', data);
  }
}

在上面的例子中，我们在子组件中添加了一个按钮，并使用(click)事件绑定将onClick方法与按钮的点击事件关联起来。在onClick方法中，我们使用dataEvent属性的emit方法触发了一个事件，并将子组件的childName属性的值作为数据传递给父组件。

在父组件中，我们通过使用(dataEvent)语法将onDataEvent方法与子组件的dataEvent输出属性关联起来。当子组件触发dataEvent事件时，父组件的onDataEvent方法会被调用，并接收到子组件传递的数据。

在Angular中，@Input和@Output装饰器是非常重要的工具，用于实现组件之间的通信。通过使用@Input装饰器，我们可以将父组件中的数据传递给子组件。而通过使用@Output装饰器，我们可以在子组件中触发事件，并将数据传递给父组件。这些装饰器的使用可以大大简化我们编写和维护组件之间的通信逻辑的工作。