解决Angular中动态输入值不更新API链接的策略与最佳实践

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'; // 点击按钮后更新为 'foo'
  }
}

<nav class="navbar nb" role="navigation" aria-label="main navigation">
  <button class="nav-button" (click)='myFunction()'>点击更新数据</button>
</nav>
<app-info [item]="currentItem"></app-info>

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent implements OnInit {
  @Input() item = ''; // 接收父组件传递的 item

  // linkUrl 在组件实例创建时被初始化，此时 item 可能是初始值（如空字符串）
  linkUrl = 'http://api.data' + this.item + 'rest.of.api';
  linkData: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // ngOnInit 只执行一次，即使 item 后续改变，这里的 http.get 也不会再次触发
    this.http.get(this.linkUrl).subscribe(link => {
      this.linkData = [link as any];
      console.log('API call made with URL:', this.linkUrl);
    });
  }
}

import { Component, OnChanges, Input, SimpleChanges } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css'],
  // 建议配合 OnPush 策略，以优化性能，只在输入属性变化时检查
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class InfoComponent implements OnChanges {
  @Input() item!: string; // 确保 item 接收到值
  linkData: any;

  constructor(private http: HttpClient) { }

  ngOnChanges(changes: SimpleChanges): void {
    // 检查 item 属性是否发生变化
    if (changes['item'] && changes['item'].currentValue !== changes['item'].previousValue) {
      const newItem = changes['item'].currentValue;
      // 根据新的 item 值构建 API 链接
      const newLinkUrl = `http://api.data${newItem}rest.of.api`;
      console.log('Item changed to:', newItem, 'New API URL:', newLinkUrl);

      // 发送新的 API 请求
      this.http.get(newLinkUrl).subscribe(link => {
        this.linkData = [link as any];
        console.log('API call made with new URL:', newLinkUrl);
      });
    }
  }
}

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

@Injectable({
  providedIn: 'root' // 使得服务在整个应用中可用
})
export class MyDataService {
  constructor(private http: HttpClient) {}

  getData(param: string): Observable<any> {
    const endpoint = `http://api.data${param}rest.of.api`;
    console.log('Fetching data from:', endpoint);
    return this.http.get(endpoint);
  }
}

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { MyDataService } from './my-data.service'; // 导入服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 使用 Observable 存储 API 返回的数据
  currentItem$!: Observable<any>; 

  constructor(private myDataService: MyDataService) {}

  myFunction(): void {
    // 当按钮点击时，通过服务获取数据
    this.currentItem$ = this.myDataService.getData('foo');
  }
}

<nav class="navbar nb" role="navigation" aria-label="main navigation">
  <button class="nav-button" (click)='myFunction()'>点击获取数据</button>
</nav>
<!-- 使用 async 管道自动订阅 Observable 并传递数据 -->
<app-info [item]="currentItem$ | async"></app-info>

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返回确定
  // InfoComponent 不再需要 HttpClient，也不需要 ngOnInit 或 ngOnChanges 来触发 API 请求
}