Angular中如何从子组件向父组件展示数组数据？

下面提供三种实用方案，帮你实现父组件默认展示子组件的tabs数组数据：

方法一：通过@ViewChild直接获取子组件实例 #

这种方式适合父子组件层级简单的场景，直接在父组件中获取子组件的引用，初始化时读取数据。

父组件代码（app.component.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;
  displayedTabs: any[] = [];

  ngAfterViewInit() {
    // 组件初始化完成后，直接获取子组件的tabs数组
    this.displayedTabs = [...this.childComponent.tabs];
  }

  // 保留原有的保存按钮逻辑（如果需要）
  onSave() {
    this.displayedTabs = [...this.childComponent.tabs];
  }
}

父组件模板（app.component.html） #

<app-child></app-child>

<h3>展示的Tabs数据：</h3>
<ul>
  <li *ngFor="let tab of displayedTabs">
    {{ tab.name }} - 当前值：{{ tab.value }}
  </li>
</ul>

<!-- 可选保留原保存按钮 -->
<button (click)="onSave()">手动同步数据</button>

方法二：子组件通过@Output主动推送初始数据 #

让子组件在初始化时主动把数据发送给父组件，更符合组件间通信的单向数据流原则。

子组件代码修改（child.component.ts） #

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  tabs = [
    {
      name: 'Tab 1',
      placeholder: 'placeholder1',
      formControlName: 'inputValue',
      value: '',
    },
    {
      name: 'Tab 2',
      placeholder: 'placeholder2',
      formControlName: 'inputValue',
      value: '',
    },
  ];

  @Output() tabsData = new EventEmitter<any[]>();

  ngOnInit() {
    // 组件初始化时，主动将tabs数据推送给父组件
    this.tabsData.emit([...this.tabs]);
  }

  // 如果子组件有保存操作，也可以在这里推送更新后的数据
  onChildSave() {
    this.tabsData.emit([...this.tabs]);
  }
}

父组件代码（app.component.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  displayedTabs: any[] = [];

  receiveTabsData(data: any[]) {
    this.displayedTabs = data;
  }
}

父组件模板（app.component.html） #

<app-child (tabsData)="receiveTabsData($event)"></app-child>

<h3>展示的Tabs数据：</h3>
<ul>
  <li *ngFor="let tab of displayedTabs">
    {{ tab.name }} - 当前值：{{ tab.value }}
  </li>
</ul>

方法三：使用共享服务（适合复杂场景） #

如果组件层级较深，或者多个组件需要共享这份数据，可以用Angular服务来实现数据共享。

1. 创建共享服务（tabs.service.ts） #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TabsService {
  private tabsSubject = new BehaviorSubject<any[]>([]);
  tabs$ = this.tabsSubject.asObservable();

  setTabs(tabs: any[]) {
    this.tabsSubject.next([...tabs]);
  }
}

2. 子组件中初始化数据 #

import { Component, OnInit } from '@angular/core';
import { TabsService } from '../tabs.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  tabs = [
    {
      name: 'Tab 1',
      placeholder: 'placeholder1',
      formControlName: 'inputValue',
      value: '',
    },
    {
      name: 'Tab 2',
      placeholder: 'placeholder2',
      formControlName: 'inputValue',
      value: '',
    },
  ];

  constructor(private tabsService: TabsService) {}

  ngOnInit() {
    this.tabsService.setTabs(this.tabs);
  }

  // 保存时更新共享数据
  onSave() {
    this.tabsService.setTabs(this.tabs);
  }
}

3. 父组件中订阅数据 #

import { Component, OnInit } from '@angular/core';
import { TabsService } from './tabs.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  displayedTabs: any[] = [];

  constructor(private tabsService: TabsService) {}

  ngOnInit() {
    this.tabsService.tabs$.subscribe(tabs => {
      this.displayedTabs = tabs;
    });
  }
}

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