Ajax调用后如何重新渲染App组件头部侧边栏并绑定AWS API数据

这是个很典型的组件间数据同步问题——因为header组件在应用初始化时就渲染完成了，而你获取用户信息的操作是异步的，所以自然没法自动触发它的重新渲染。咱们可以通过共享服务+RxJS可观察对象来解决这个问题，具体实现步骤如下：

1. 创建一个共享用户服务 #

先新建一个user.service.ts，用来存储和传递用户信息，这里用BehaviorSubject（它能保存当前值，新订阅者也能拿到最新值）：

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

@Injectable({
  providedIn: 'root' // 全局单例服务
})
export class UserService {
  // 初始化一个空的用户对象作为默认值
  private userSubject = new BehaviorSubject<any>(null);
  public user$: Observable<any> = this.userSubject.asObservable();

  // 更新用户信息的方法
  setUser(userData: any): void {
    this.userSubject.next(userData);
  }
}

2. 在AppComponent中调用API后更新服务数据 #

修改你app.component.ts里的代码，在获取到Cognito返回的用户数据后，调用服务的setUser方法推送数据：

import { Component } from '@angular/core';
import { UserService } from './user.service'; // 引入服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private userService: UserService) {}

  // 假设这是你获取token后调用的方法
  fetchUserInfo(accToken: string): void {
    this.cognitoidentityserviceprovider.getUser({"AccessToken": accToken}, (err, data) => {
      if (!err) {
        // 将获取到的用户数据推送到服务中
        this.userService.setUser(data);
      } else {
        console.error('获取用户信息失败:', err);
      }
    });
  }
}

3. 在Header组件中订阅服务数据并更新视图 #

修改header.component.ts，订阅服务的user$可观察对象，拿到最新的用户数据后绑定到视图：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserService } from '../user.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit, OnDestroy {
  userData: any;
  private userSubscription: Subscription;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    // 订阅用户数据变化
    this.userSubscription = this.userService.user$.subscribe(user => {
      if (user) {
        this.userData = user;
        // 这里数据更新后，Angular会自动触发视图重新渲染
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.userSubscription) {
      this.userSubscription.unsubscribe();
    }
  }
}

4. 在Header模板中绑定数据 #

最后在header.component.html里直接使用userData即可，比如：

<div class="header-user-info">
  <span>欢迎, {{ userData?.Username }}</span>
  <!-- 其他用户信息字段根据Cognito返回的数据结构调整 -->
</div>

这样一来，当你在AppComponent中异步获取到用户信息后，会通过共享服务通知Header组件，Header组件就能自动更新视图了，完全不受它提前渲染的影响。

内容的提问来源于stack exchange，提问作者BHUVNESH KUMAR