1. 在 auth.service.ts 文件中导入 HttpClient 和 Observable 模块。

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

@Injectable({ providedIn: 'root' }) export class AuthService {

constructor(private http: HttpClient) { }

// other auth-related methods

// method to check if user has an admin role
isAdmin(): Observable {
    // make a GET request to the backend API to get the user's role
    return this.http.get('/api/user/role').pipe(
        map(role => {
            if (role === 'admin') {
                return true;
            } else {
                return false;
            }
        })
    );
}

}

2. 在需要使用 admin 角色的组件中导入 auth.service.ts 文件，并在构造函数中注入该服务。

import { Component, OnInit } from '@angular/core'; import { AuthService } from '../auth.service';

@Component({ selector: 'app-admin-component', templateUrl: './admin.component.html', styleUrls: ['./admin.component.css'] }) export class AdminComponent implements OnInit {

constructor(private authService: AuthService) { }

ngOnInit() {}

// method to perform admin-only actions
doAdminAction() {
    this.authService.isAdmin().subscribe(isAdmin => {
        if (isAdmin) {
            // perform admin-only action here
        } else {
            // display error message to user
        }
    });
}

}

3. 在 template 中使用 ngIf 指令根据用户角色来显示或隐藏某些元素。