Angular - Get parent component在初始化后接收数据

基础概念

在Angular中，组件是构建用户界面的基本单元。每个组件都有一个视图，该视图由一组HTML元素组成，并且可以与其父组件和子组件进行交互。在某些情况下，你可能需要从子组件访问其父组件的数据或方法。

类型

使用@Input()和@Output()装饰器：这是Angular推荐的方式，用于父子组件之间的通信。@Input()用于接收父组件的数据，而@Output()用于向父组件发送事件。
使用服务（Service）：当组件不是直接的父子关系时，可以使用服务来共享数据和方法。
直接访问父组件：在某些情况下，你可能需要直接访问父组件的实例来获取数据。这通常不是推荐的做法，因为它破坏了组件的封装性。

应用场景

假设你有一个父组件ParentComponent和一个子组件ChildComponent。ParentComponent在初始化后接收一些数据，并希望将这些数据传递给ChildComponent。

问题及解决方案

问题

如何在ChildComponent中获取ParentComponent初始化后接收的数据？

原因

子组件在初始化时可能无法立即获取到父组件的数据，因为父组件的数据可能是异步加载的。

解决方案

使用@Input()装饰器：

在ParentComponent的模板中，将数据绑定到ChildComponent的输入属性上。

<!-- parent.component.html -->
<child-component [parentData]="data"></child-component>

在ChildComponent中，使用@Input()装饰器接收数据。

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<div>{{ parentData }}</div>`
})
export class ChildComponent {
  @Input() parentData: any;
}

在ParentComponent中，确保在数据加载完成后更新视图。

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  data: any;

  ngOnInit() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.data = { message: 'Hello from parent!' };
    }, 1000);
  }
}

使用服务：

创建一个共享服务DataService，用于在父组件和子组件之间共享数据。

// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject = new BehaviorSubject<any>(null);
  data$ = this.dataSubject.asObservable();

  setData(data: any) {
    this.dataSubject.next(data);
  }
}

在ParentComponent中，使用服务设置数据。

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.dataService.setData({ message: 'Hello from parent!' });
    }, 1000);
  }
}

在ChildComponent中，订阅服务的数据。

// child.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `<div>{{ parentData | json }}</div>`
})
export class ChildComponent implements OnInit {
  parentData: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.data$.subscribe(data => {
      this.parentData = data;
    });
  }
}