在Angular中隐藏部分菜单(权限)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PermissionService {
  private userPermissions: string[] = []; // 用户权限列表

  constructor() { }

  setUserPermissions(permissions: string[]): void {
    this.userPermissions = permissions;
  }

  hasPermission(permission: string): boolean {
    return this.userPermissions.includes(permission);
  }
}

import { Component, OnInit } from '@angular/core';
import { PermissionService } from 'path-to-permission-service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  constructor(private permissionService: PermissionService) { }

  ngOnInit(): void {
  }

  hasPermission(permission: string): boolean {
    return this.permissionService.hasPermission(permission);
  }
}

<ul>
  <li *ngIf="hasPermission('menuA')">菜单A</li>
  <li *ngIf="hasPermission('menuB')">菜单B</li>
  <li *ngIf="hasPermission('menuC')">菜单C</li>
</ul>