Angular v6中点击父组件发送按钮获取子组件值（无需子组件事件）

嘿，我刚好处理过类似的Angular场景，给你分享几个不用子组件触发事件就能拿到所有输入值的实用方法，都适配Angular v6：

这个方法的核心是让父组件主动获取所有子组件的实例，然后调用子组件暴露的公共方法来拿到输入值，完全不需要子组件触发任何事件。

步骤1：子组件暴露获取数据的公共方法 #

在你的Card Component里，把需要收集的输入值（评论、复选框状态、列表选择项等）绑定到组件属性，然后写一个公共方法返回这些数据：

// card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent {
  // 绑定模板里的输入控件
  comment: string = '';
  checkboxChecked: boolean = false;
  listSelection: string = '';

  // 暴露给父组件的公共方法，返回当前组件的所有输入数据
  getCardInputValues() {
    return {
      comment: this.comment,
      checkboxChecked: this.checkboxChecked,
      listSelection: this.listSelection
    };
  }
}

步骤2：父组件用@ViewChildren批量获取子组件 #

在父组件里，通过@ViewChildren获取所有渲染出来的CardComponent实例，然后在发送按钮的点击事件里遍历这些实例，调用getCardInputValues()收集数据：

// parent.component.ts
import { Component, ViewChildren, QueryList } from '@angular/core';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="collectAllCardData()">发送</button>
    <!-- 循环渲染子组件 -->
    <app-card *ngFor="let item of cardItems"></app-card>
  `
})
export class ParentComponent {
  // 示例循环数据，根据你的实际业务替换
  cardItems = [1, 2, 3, 4];

  // 获取所有CardComponent实例
  @ViewChildren(CardComponent) cardComponents!: QueryList<CardComponent>;

  collectAllCardData() {
    // 遍历子组件实例，收集每一个的输入值
    const allCardData = this.cardComponents.map(card => card.getCardInputValues());
    
    // 这里就拿到了所有子组件的输入数据，接下来可以发送到后端或者做其他处理
    console.log('所有子组件输入值：', allCardData);
  }
}

这个方法的优势是逻辑清晰，封装性好，子组件只需要负责自己的数据管理，父组件主动触发收集动作，完全符合你的需求。

如果你的项目比较复杂，子组件和父组件需要解耦，或者需要在多个地方获取子组件数据，可以用Angular的共享服务来实现数据同步。

步骤1：创建共享服务 #

这个服务用来维护所有子组件的输入数据，提供初始化、更新和获取数据的方法：

// card-data.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CardDataService {
  private cardDataStore: Array<{ id: string; data: any }> = [];

  // 初始化子组件数据（子组件创建时调用）
  initCard(cardId: string, initialData: any) {
    const existingIndex = this.cardDataStore.findIndex(item => item.id === cardId);
    if (existingIndex === -1) {
      this.cardDataStore.push({ id: cardId, data: initialData });
    }
  }

  // 更新子组件数据（输入变化时调用）
  updateCard(cardId: string, newData: any) {
    const existingIndex = this.cardDataStore.findIndex(item => item.id === cardId);
    if (existingIndex !== -1) {
      this.cardDataStore[existingIndex].data = { ...this.cardDataStore[existingIndex].data, ...newData };
    }
  }

  // 获取所有子组件的数据
  getAllCardData() {
    return this.cardDataStore.map(item => item.data);
  }
}

步骤2：子组件绑定服务同步数据 #

在Card Component里注入共享服务，给每个子组件生成唯一ID，然后在输入控件变化时同步数据到服务：

// card.component.ts
import { Component, OnInit } from '@angular/core';
import { CardDataService } from '../card-data.service';
// Angular v6需要手动安装uuid包：npm install uuid@3（因为v4+可能需要ES6+支持）
import { v4 as uuidv4 } from 'uuid';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent implements OnInit {
  private cardId: string;
  comment: string = '';
  checkboxChecked: boolean = false;
  listSelection: string = '';

  constructor(private cardDataService: CardDataService) {
    // 生成唯一ID标识当前子组件
    this.cardId = uuidv4();
  }

  ngOnInit() {
    // 初始化数据到服务
    this.cardDataService.initCard(this.cardId, {
      comment: this.comment,
      checkboxChecked: this.checkboxChecked,
      listSelection: this.listSelection
    });
  }

  // 输入控件变化时同步数据到服务
  onInputChanged() {
    this.cardDataService.updateCard(this.cardId, {
      comment: this.comment,
      checkboxChecked: this.checkboxChecked,
      listSelection: this.listSelection
    });
  }
}

子组件模板里给每个输入控件绑定变化事件：

<!-- card.component.html -->
<textarea [(ngModel)]="comment" (input)="onInputChanged()"></textarea>
<input type="checkbox" [(ngModel)]="checkboxChecked" (change)="onInputChanged()">
<select [(ngModel)]="listSelection" (change)="onInputChanged()">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

步骤3：父组件从服务获取数据 #

父组件里注入共享服务，点击发送按钮时直接调用服务的方法拿到所有数据：

// parent.component.ts
import { Component } from '@angular/core';
import { CardDataService } from './card-data.service';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="collectAllCardData()">发送</button>
    <app-card *ngFor="let item of cardItems"></app-card>
  `
})
export class ParentComponent {
  cardItems = [1, 2, 3, 4];

  constructor(private cardDataService: CardDataService) {}

  collectAllCardData() {
    const allCardData = this.cardDataService.getAllCardData();
    console.log('所有子组件输入值：', allCardData);
    // 后续处理逻辑
  }
}

这个方法的优势是组件解耦，数据实时同步，适合大型应用或者需要多组件共享数据的场景。

如果你的场景比较简单，也可以直接让父组件访问子组件的公共属性（Angular组件的属性默认是公共的），不过这种方法封装性较差，不推荐在复杂项目中使用：

父组件模板给子组件加模板引用变量：

<app-card #cardInstance *ngFor="let item of cardItems"></app-card>
<button (click)="collectAllCardData()">发送</button>

父组件ts里通过@ViewChildren获取模板引用变量，直接读取属性：

// parent.component.ts
import { Component, ViewChildren, QueryList } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  cardItems = [1, 2, 3, 4];
  @ViewChildren('cardInstance') cardInstances!: QueryList<any>;

  collectAllCardData() {
    const allCardData = this.cardInstances.map(instance => ({
      comment: instance.comment,
      checkboxChecked: instance.checkboxChecked,
      listSelection: instance.listSelection
    }));
    console.log(allCardData);
  }
}

内容的提问来源于stack exchange，提问作者Dash