Angular：通过控制器订阅服务却被忽略的问题

看起来你卡在了「点击不同用户动态获取对应目录」这个点上——原来的getCatalogs()方法固定用服务里的this.user，肯定没法适配多个用户的场景。我帮你调整下代码，完美解决这个问题：

第一步：修改DatasourceService的getCatalogs方法 #

把原来硬编码的this.user改成接收外部传入的用户参数，这样每次调用都能针对不同用户发起请求：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Catalog } from './path-to-your-catalog-model';

@Injectable({ providedIn: 'root' })
export class DatasourceService {
  constructor(private http: HttpClient) {}
  dataUrl = 'your-base-api-url-here/'; // 你的基础API地址

  // 修改方法，接收用户参数
  getCatalogs(user: { username: string; password: string }): Observable<Catalog[]> {
    const apiPath = `${this.dataUrl}metadata/getcatalogs/name/?user=${user.username}&password=${user.password}`;
    return this.http.get<Catalog[]>(apiPath);
  }
}

第二步：组件中处理用户点击事件 #

假设你的用户列表模板是这样的，点击用户时把当前用户对象传递给组件方法：

<!-- 用户列表模板 -->
<div class="user-list">
  <div *ngFor="let user of userList" (click)="fetchUserCatalogs(user)" class="user-item">
    {{ user.username }} <!-- 显示用户名 -->
  </div>
</div>

<!-- 用来展示获取到的目录 -->
<div class="catalog-list" *ngIf="currentCatalogs.length">
  <h3>当前用户可访问目录</h3>
  <ul>
    <li *ngFor="let catalog of currentCatalogs">{{ catalog.name }}</li>
  </ul>
</div>

然后在组件TS文件中，调用服务的方法并处理返回结果：

import { Component } from '@angular/core';
import { DatasourceService } from './datasource.service';
import { Catalog } from './path-to-your-catalog-model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {
  userList = [/* 你的用户数组，比如从后端获取的用户列表 */];
  currentCatalogs: Catalog[] = [];

  constructor(private datasourceService: DatasourceService) {}

  fetchUserCatalogs(targetUser: { username: string; password: string }) {
    // 调用服务方法，传入点击的用户
    this.datasourceService.getCatalogs(targetUser).subscribe({
      next: (catalogs) => {
        this.currentCatalogs = catalogs;
        // 这里可以添加目录渲染后的逻辑，比如滚动到目录区域
      },
      error: (error) => {
        console.error('获取目录失败:', error);
        // 这里可以添加错误提示，比如弹窗告知用户
      }
    });
  }
}

重要安全提示！ #

直接把密码放在URL参数里是非常不安全的，容易被日志、浏览器历史记录捕获。建议改成POST请求，把用户信息放在请求体中：

// 修改DatasourceService的getCatalogs为POST请求
getCatalogs(user: { username: string; password: string }): Observable<Catalog[]> {
  const apiPath = `${this.dataUrl}metadata/getcatalogs/name/`;
  return this.http.post<Catalog[]>(apiPath, user); // 把用户信息放在请求体
}

这样能大幅提升安全性，符合REST API的最佳实践。

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