Angular中如何无需重复权限判断，隐藏无子元素的父元素？

你完全可以实现这种需求，不用在<ul>里重复罗列所有权限，下面给两种实用方案：

方案一：数据驱动实现（推荐） #

把权限项统一维护在组件中，先过滤出有权限显示的项，再根据过滤后的列表长度控制父元素的显示状态：

组件代码 #

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

@Component({
  selector: 'app-permission-list',
  template: `
    <ul *ngIf="visiblePermissionItems.length > 0">
      <li *ngFor="let item of visiblePermissionItems">{{ item.label }}</li>
    </ul>
  `
})
export class PermissionListComponent {
  // 统一管理所有权限项
  private allPermissionItems = [
    { label: 'a', permission: 'A:READ' },
    { label: 'b', permission: 'B:READ' },
    // 按需添加更多权限项
  ];

  // 过滤出有权限显示的项
  get visiblePermissionItems() {
    return this.allPermissionItems.filter(item => this.hasPermission(item.permission));
  }

  // 你的权限判断逻辑
  hasPermission(permission: string): boolean {
    // 替换成实际的权限校验代码，比如从权限服务获取校验结果
    return /* 权限校验结果 */;
  }
}

这种方式贴合Angular数据驱动的理念，既不用重复编写权限判断逻辑，也不需要直接操作DOM，后期维护更省心。

方案二：通过ViewChildren监听DOM元素 #

如果不想改动现有模板结构，可以通过@ViewChildren监听子<li>元素的存在，动态控制父<ul>的显示：

组件代码 #

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-permission-list',
  template: `
    <ul *ngIf="hasVisibleItems">
      <li #permissionItem *ngIf="hasPermission('A:READ')">a</li>
      <li #permissionItem *ngIf="hasPermission('B:READ')">b</li>
      <!-- 更多权限项 -->
    </ul>
  `
})
export class PermissionListComponent implements AfterViewInit {
  @ViewChildren('permissionItem') permissionItems!: QueryList<ElementRef>;
  hasVisibleItems = false;

  // 你的权限判断逻辑
  hasPermission(permission: string): boolean {
    return /* 权限校验结果 */;
  }

  ngAfterViewInit() {
    this.updateVisibleStatus();
    // 监听子元素变化（比如权限动态变更时）
    this.permissionItems.changes.subscribe(() => {
      this.updateVisibleStatus();
    });
  }

  private updateVisibleStatus() {
    this.hasVisibleItems = this.permissionItems.length > 0;
  }
}

需要给每个需要判断的<li>添加模板引用变量#permissionItem，这样组件才能捕获到这些元素的状态变化。

两种方案都能避免在<ul>里重复罗列权限列表，实现“无子元素则自动隐藏父元素”的效果。

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