复用同一Component TS文件时，如何集成特权与非特权用户API？

1. 输入属性（@Input）传递权限标识 #

组件通过@Input()接收外部传入的用户权限类型，内部根据标识选择对应API调用，适合权限由调用页面明确指定的场景。

示例代码：

// 共享组件TS文件
import { Component, Input } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-shared-component',
  templateUrl: './shared-component.component.html'
})
export class SharedComponent {
  @Input() userRole: 'privileged' | 'regular';

  constructor(private apiService: ApiService) {}

  loadData() {
    if (this.userRole === 'privileged') {
      this.apiService.getPrivilegedData().subscribe(data => {
        // 处理特权用户数据逻辑
      });
    } else {
      this.apiService.getRegularData().subscribe(data => {
        // 处理普通用户数据逻辑
      });
    }
  }
}

// 特权用户页面调用组件
<app-shared-component [userRole]="'privileged'"></app-shared-component>

// 普通用户页面调用组件
<app-shared-component [userRole]="'regular'"></app-shared-component>

2. 依赖注入实现API服务解耦 #

把两个API封装成实现同一抽象接口的不同服务，在组件或模块层级根据权限注入对应服务，让组件无需关心具体API细节。

示例代码：

// 定义抽象API接口
export abstract class DataApi {
  abstract fetchData(): Observable<any>;
}

// 特权用户API服务
@Injectable()
export class PrivilegedDataApi implements DataApi {
  constructor(private http: HttpClient) {}
  
  fetchData(): Observable<any> {
    return this.http.get('/api/privileged/resources');
  }
}

// 普通用户API服务
@Injectable()
export class RegularDataApi implements DataApi {
  constructor(private http: HttpClient) {}
  
  fetchData(): Observable<any> {
    return this.http.get('/api/regular/resources');
  }
}

// 共享组件TS文件
@Component({
  selector: 'app-shared-component',
  templateUrl: './shared-component.component.html',
  // 特权页面模块中替换为PrivilegedDataApi，普通页面替换为RegularDataApi
  providers: [{ provide: DataApi, useClass: RegularDataApi }]
})
export class SharedComponent {
  constructor(private dataApi: DataApi) {}

  loadData() {
    this.dataApi.fetchData().subscribe(data => {
      // 统一处理数据逻辑，无需区分API类型
    });
  }
}

3. 全局权限服务动态判断 #

通过全局权限服务自动识别当前用户权限，组件内部直接根据权限选择API，无需外部传参，适合权限为全局状态的场景。

示例代码：

// 全局权限服务
@Injectable({ providedIn: 'root' })
export class AuthService {
  isPrivileged(): boolean {
    // 从token、用户信息缓存等判断权限
    return sessionStorage.getItem('userRole') === 'admin';
  }
}

// 共享组件TS文件
@Component({
  selector: 'app-shared-component',
  templateUrl: './shared-component.component.html'
})
export class SharedComponent {
  constructor(private apiService: ApiService, private authService: AuthService) {}

  loadData() {
    const targetApi = this.authService.isPrivileged() 
      ? this.apiService.getPrivilegedData() 
      : this.apiService.getRegularData();

    targetApi.subscribe(data => {
      // 处理数据逻辑
    });
  }
}

方案选择建议 #

• 若权限由调用页面控制，选输入属性方案，灵活可控；
• 若希望组件完全隔离API细节，选依赖注入方案，符合开闭原则；
• 若权限为全局统一状态，选全局权限服务方案，减少冗余传参。

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