解决Angular中ngOnInit无法响应动态输入更新API链接的问题

// my.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MyService {
  constructor(private http: HttpClient) {}

  /**
   * 根据传入的链接片段获取数据
   * @param linkSegment 链接中动态变化的部分
   * @returns API响应的Observable
   */
  getData(linkSegment: string): Observable<any> {
    const endpoint = `http://api.data${linkSegment}rest.of.api`; // 构建完整的API链接
    console.log(`Fetching data from: ${endpoint}`); // 调试用
    return this.http.get(endpoint);
  }
}

// app.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { MyService } from './my.service'; // 导入服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 使用Observable来存储API请求的结果，结合async管道处理
  currentItem$!: Observable<any>; // 假设API返回的数据类型

  constructor(private myService: MyService) {} // 注入服务

  /**
   * 当按钮点击时触发，更新currentItem$并导致子组件重新渲染
   */
  myFunction(): void {
    const dynamicValue = 'foo'; // 动态值，这里可以是用户输入或任何逻辑生成
    this.currentItem$ = this.myService.getData(dynamicValue); // 调用服务获取数据
  }
}

<!-- app.component.html -->
<nav class="navbar nb" role="navigation" aria-label="main navigation">
  <button class="nav-button" (click)="myFunction()">点击更新API</button>
</nav>

<!-- 使用 async 管道将 Observable 结果传递给子组件 -->
<app-info [item]="currentItem$ | async"></app-info>

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

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent {
  @Input() item: any; // 接收父组件传递的数据，类型根据实际API返回数据确定

  // 子组件不再需要HttpClient或ngOnInit来发起请求
  // 它只负责展示通过@Input接收到的数据
}

// info.component.ts
import {
  Component,
  Input,
  OnChanges, // 导入 OnChanges 接口
  SimpleChanges, // 导入 SimpleChanges 类型
  ChangeDetectionStrategy // 导入 ChangeDetectionStrategy
} from '@angular/core';
import { HttpClient } from '@angular/common/http'; // 再次引入 HttpClient (虽然不推荐在组件中直接使用)

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // 启用 OnPush 变更检测策略
})
export class InfoComponent implements OnChanges { // 实现 OnChanges 接口
  @Input() item: string = ''; // 确保有默认值或通过 ! 断言
  linkData: any; // 存储API返回的数据

  constructor(private http: HttpClient) { }

  /**
   * ngOnChanges 生命周期钩子，在任何 @Input 属性发生变化时触发
   * @param changes 包含所有发生变化的输入属性的对象
   */
  ngOnChanges(changes: SimpleChanges): void {
    // 检查 'item' 输入属性是否发生变化，并且新值不为空
    if (changes['item'] && this.item) {
      // 在这里重新构建API链接
      const dynamicLinkUrl = `http://api.data${this.item}rest.of.api`;
      console.log(`Re-fetching data from: ${dynamicLinkUrl}`); // 调试用

      // 发起API请求
      this.http.get(dynamicLinkUrl).subscribe(link => {
        this.linkData = [link as any]; // 更新数据
        // 如果使用了 OnPush 策略，可能需要手动触发变更检测
        // this.cdr.detectChanges(); // 如果需要，注入 ChangeDetectorRef 并调用
      }, error => {
        console.error('API call failed:', error);
        this.linkData = []; // 清空或显示错误
      });
    }
  }

  // ngOnInit 在此场景下不再需要用于API请求，因为它只执行一次
  // ngOnInit() {
  //   // 避免在此处发起依赖于动态输入的API请求
  // }
}

// app.component.ts (与原始问题类似，但更推荐使用方案一)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentItem = ''; // 初始值

  myFunction() {
    this.currentItem = 'foo'; // 更新值，这将触发子组件的 ngOnChanges
  }
}

<!-- app.component.html (与原始问题类似) -->
<nav class="navbar nb" role="navigation" aria-label="main navigation">
  <button class="nav-button" (click)='myFunction()'>button</button>
</nav>
<app-info [item]="currentItem"></app-info>