【组件传值】Angualr父子组件传值(@Input、@Output)

概述

在 Angular 中，父子组件之间的数据传递通常通过 输入属性 (@Input) 和 输出事件 (@Output) 来实现。以下是父子组件传递数据的常见方法：

---

父子传值

1. 父组件向子组件传递数据

父组件通过设置子组件的 @Input 属性，向子组件传递数据。

示例：

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `<p>Received from parent: {{ parentData }}</p>`,
})
export class ChildComponent {
  @Input() parentData!: string; // 从父组件接收的数据
}

父组件 (parent.component.html)

<app-child [parentData]="dataFromParent"></app-child>

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  dataFromParent = 'Hello from Parent!';
}

---

2. 子组件向父组件传递数据

子组件通过 @Output 发射事件，让父组件接收数据。

示例：

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `<button (click)="sendData()">Send Data to Parent</button>`,
})
export class ChildComponent {
  @Output() dataToParent = new EventEmitter<string>(); // 创建输出事件

  sendData() {
    this.dataToParent.emit('Hello from Child!'); // 触发事件并传递数据
  }
}

父组件 (parent.component.html)

<app-child (dataToParent)="receiveData($event)"></app-child>
<p>Data from child: {{ dataFromChild }}</p>

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  dataFromChild = '';

  receiveData(data: string) {
    this.dataFromChild = data; // 接收子组件的数据
  }
}

---

3. 双向绑定（父子组件双向数据传递）

Angular 支持双向绑定，可以通过 @Input 和 @Output 的组合实现父子组件之间的数据同步。

示例：

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `
    <input [(ngModel)]="childData" (ngModelChange)="onDataChange()" />
  `,
})
export class ChildComponent {
  @Input() childData!: string;
  @Output() childDataChange = new EventEmitter<string>();

  onDataChange() {
    this.childDataChange.emit(this.childData); // 数据变化时向父组件发射事件
  }
}

父组件 (parent.component.html)

<app-child [(childData)]="parentData"></app-child>
<p>Parent Data: {{ parentData }}</p>

父组件 (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  parentData = 'Initial Data';
}

---

4. 父组件调用子组件方法

父组件可以通过 @ViewChild 获取子组件的实例，直接调用其方法或属性。

示例：

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `<p>Child Component</p>`,
})
export class ChildComponent {
  sayHello() {
    console.log('Hello from Child Component!');
  }
}

父组件 (parent.component.ts)

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="callChildMethod()">Call Child Method</button>
  `,
})
export class ParentComponent {
  @ViewChild(ChildComponent) child!: ChildComponent;

  callChildMethod() {
    this.child.sayHello(); // 调用子组件的方法
  }
}

---

5. 子组件调用父组件方法

通过 @Output 和事件发射器，子组件可以通知父组件调用方法。

示例：

同第 2 点的例子，子组件通过发射事件通知父组件。

---

总结

• 单向数据传递（父 → 子）：使用 @Input。
• 事件传递（子 → 父）：使用 @Output。
• 双向绑定（父 ↔ 子）：使用 @Input 和 @Output 的组合，或直接用 [(ngModel)]。
• 直接访问（父调用子）：使用 @ViewChild。