Angular中动态输入绑定与API请求更新策略指南

// info.component.ts (原始问题代码示例)
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 = '';
  // 问题所在：linkUrl 在组件实例化时被初始化，此时 item 可能是其默认值或空字符串
  linkUrl = 'http://api.data/' + this.item + '/rest.of.api';
  linkData: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // ngOnInit 只执行一次，因此此处使用的 linkUrl 是基于初始 item 值的
    this.http.get(this.linkUrl).subscribe(link => {
      this.linkData = [link as any];
    });
  }
}

// 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 用于构建API链接的片段
   * @returns 包含API响应的Observable
   */
  getData(linkSegment: string): Observable<any> {
    const endpoint = `http://api.data/${linkSegment}/rest.of.api`;
    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 {
  currentItem$: Observable<any> | undefined; // 使用 Observable 来存储数据流

  constructor(private myService: MyService) {}

  myFunction(): void {
    // 当按钮点击时，调用服务获取数据，并将 Observable 赋值给 currentItem$
    this.currentItem$ = this.myService.getData('foo');
  }
}

<!-- app.component.html (父组件模板) -->
<nav class="navbar nb" role="navigation" aria-label="main navigation">
  <button class="nav-button" (click)='myFunction()'>点击更新数据</button>
</nav>
<!-- 使用 async 管道订阅 currentItem$，并将结果作为 item 传递给 app-info -->
<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; // 接收父组件传递的数据
  // 不再需要 HttpClient 或 ngOnInit 来获取数据
}

// info.component.ts (使用 ngOnChanges)
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 = '';
  linkData: any;

  constructor(private http: HttpClient) { }

  /**
   * ngOnChanges 生命周期钩子，在任何输入属性发生变化时被调用
   * @param changes 包含所有变化信息的 SimpleChanges 对象
   */
  ngOnChanges(changes: SimpleChanges): void {
    // 检查 item 属性是否发生了变化
    if (changes['item'] && changes['item'].currentValue !== changes['item'].previousValue) {
      const newItem = changes['item'].currentValue;
      // 确保 newItem 不为空或有效，才发送请求
      if (newItem) {
        // 在这里根据最新的 item 值构建 API 链接并发送请求
        const dynamicLinkUrl = `http://api.data/${newItem}/rest.of.api`;
        this.http.get(dynamicLinkUrl).subscribe(link => {
          this.linkData = [link as any];
        });
      }
    }
  }
}