在父api Angular之后调用子api

在Angular框架中，父组件调用子组件的API通常涉及到组件间的通信。这种通信可以通过几种不同的方式实现，包括使用@Input()和@Output()装饰器、服务（Services）、本地状态管理库（如NgRx）或者通过本地状态管理（如使用BehaviorSubject）。下面我将详细介绍这些方法，并提供示例代码。

基础概念

父组件：Angular应用中的一个组件，它可以包含其他组件（子组件）。

子组件：被父组件包含的组件，它可以有自己的模板、控制器和样式。

组件间通信：父组件与子组件之间传递数据和事件的过程。

类型与应用场景

使用`@Input()`和`@Output()`

这是最基本的组件间通信方式，适用于父子组件之间的直接数据传递和事件触发。

应用场景：当父组件需要向子组件传递数据，或者子组件需要通知父组件某个事件发生时。

使用服务（Services）

通过共享服务，可以在不同的组件之间共享数据和逻辑。

应用场景：适用于需要在多个不相关的组件之间共享状态或逻辑的场景。

使用本地状态管理库（如NgRx）

对于复杂的应用，可以使用状态管理库来集中管理应用的状态。

应用场景：大型应用，需要集中管理和跟踪状态变化。

示例代码

使用`@Input()`和`@Output()`

父组件：

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

@Component({
  selector: 'app-parent',
  template: `<app-child [parentData]="data" (childEvent)="handleChildEvent($event)"></app-child>`
})
export class ParentComponent {
  data = 'Data from parent';

  handleChildEvent(event: any) {
    console.log('Event from child:', event);
  }
}

子组件：

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

@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent()">Send to Parent</button>`
})
export class ChildComponent {
  @Input() parentData: string;
  @Output() childEvent = new EventEmitter<string>();

  sendToParent() {
    this.childEvent.emit('Hello from child');
  }
}

使用服务（Services）

共享服务：

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

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

  updateData(newData: string) {
    this.dataSubject.next(newData);
  }
}

父组件：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`
})
export class ParentComponent {
  constructor(private dataService: DataService) {
    this.dataService.data$.subscribe(data => console.log(data));
  }
}

子组件：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `<button (click)="updateParentData()">Update Parent Data</button>`
})
export class ChildComponent {
  constructor(private dataService: DataService) {}

  updateParentData() {
    this.dataService.updateData('New Data from child');
  }
}