Angular 11 中如何使用 @Input 和 @Output 传递数据-JavaScript中文网-JavaScript教程资源分享门户

Angular 11 中如何使用 @Input 和 @Output 传递数据

Angular 是一款流行且强大的前端框架，由于其模块化、组件化的设计思想，使得数据传递成为其中非常重要的一环。在 Angular 中，使用 @Input 和 @Output 装饰器来实现组件之间的通信是非常常见的做法。本文将深入讲解 @Input 和 @Output 的使用方法，并示范代码来更好地帮助各位理解。

@Input 装饰器

@Input 装饰器用于在父组件中向子组件中传入数据，使得子组件可以使用父组件中的数据。下面是一个简单的示例代码：

// 父组件
@Component({
  selector: 'parent-component',
  template: `
    <child-component [myData]="parentData"></child-component>
  `,
})
export class ParentComponent {
  parentData = '来自父组件的数据';
}

// 子组件
@Component({
  selector: 'child-component',
  template: `
    <p>{{ myData }}</p>
  `,
})
export class ChildComponent {
  @Input() myData: string;
}

在父组件中，我们声明了一个 parentData 变量，并将其传递给子组件 child-component，子组件中使用 @Input 装饰器声明了一个 myData 属性，与父组件内传递的 myData 属性绑定，从而实现传递数据。

此外，@Input 装饰器也可以实现双向数据绑定。例如：

// 父组件
@Component({
  selector: 'parent-component',
  template: `
    <child-component [(myData)]="parentData"></child-component>
  `,
})
export class ParentComponent {
  parentData = '来自父组件的数据';
}

// 子组件
@Component({
  selector: 'child-component',
  template: `
    <input type="text" [(ngModel)]="myData">
  `,
})
export class ChildComponent {
  @Input() myData: string;
  @Output() myDataChange = new EventEmitter<string>();
  
  onInputChange(newValue: string) {
    this.myData = newValue;
    this.myDataChange.emit(newValue);
  }
}

在父组件中使用了双向数据绑定 [(myData)]="parentData"，在子组件中使用 @Output 装饰器声明了一个 myDataChange 事件，当子组件中的输入框值发生改变时，触发 onInputChange 方法，更新 myData 属性值，并通过 myDataChange 事件将新的值返回到父组件，从而实现双向数据绑定。

@Output 装饰器

@Output 装饰器用于在子组件中向父组件中传递数据，使得父组件可以获取子组件中的数据。下面是一个示例代码：

// 父组件
@Component({
  selector: 'parent-component',
  template: `
    <child-component (inputChange)="onInputChange($event)"></child-component>
    <p>子组件传来的值：{{ childValue }}</p>
  `,
})
export class ParentComponent {
  childValue: string;

  onInputChange(newValue: string) {
    this.childValue = newValue;
  }
}

// 子组件
@Component({
  selector: 'child-component',
  template: `
    <input type="text" (input)="onInputChange($event)">
  `,
})
export class ChildComponent {
  @Output() inputChange = new EventEmitter<string>();

  onInputChange(event: any) {
    const newValue = event.target.value;
    this.inputChange.emit(newValue);
  }
}

在子组件中，我们使用 @Output 装饰器声明了一个 inputChange 事件，当子组件中的输入框值发生改变时，触发 onInputChange 方法，并通过 inputChange 事件将新的值发送到父组件。在父组件中，我们使用 (inputChange)="onInputChange($event)" 来监听子组件的 inputChange 事件，并在回调函数中获取子组件传过来的值，从而实现数据传递。

总结

本文讲解了在 Angular 11 中使用 @Input 和 @Output 装饰器传递数据的方法，以及能够使用双向数据绑定和事件绑定实现双向数据流的方法。我们需要在父组件中使用 @Input 装饰器声明一个属性，将其传递给子组件；在子组件中使用 @Input 装饰器声明一个与父组件中属性绑定的属性，从而接收传递来的数据。如果需要实现双向数据绑定，我们还需要使用 @Output 装饰器声明一个事件，并在子组件中触发该事件传递数据回父组件。通过这些方法，我们可以在 Angular 应用程序中实现组件间的数据通信，从而更好地开发出更为强大的应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ae8341add4f0e0ff80ce10