通过Angular指令根据权限禁用按钮与输入框的问题求助

你的代码存在几个关键问题，导致禁用逻辑失效：

1. 结构型指令误用：你用TemplateRef和ViewContainerRef创建新视图，但每次判断都会生成新元素，既冗余又不符合状态控制的需求；
2. disabled属性设置错误：HTML中布尔属性（如disabled）只要存在就会生效，哪怕设置为'false'也没用，必须通过元素的原生属性直接赋值布尔值；
3. 逻辑颠倒：你在无权限时设置disabled='false'，这会让元素保持可用，和需求相反。

正确实现方案：使用属性型指令 #

属性型指令专门用于修改已有DOM元素的属性和状态，更适合这类场景：

1. 创建权限禁用指令

import { Directive, Input, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appPermissionDisable]'
})
export class PermissionDisableDirective implements OnInit {
  // 接收权限状态输入
  @Input() appPermissionDisable!: boolean;

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    // 直接控制元素的disabled原生属性
    this.el.nativeElement.disabled = !this.appPermissionDisable;
    
    // 针对输入框额外处理readonly（可选）
    if (this.el.nativeElement.tagName.toLowerCase() === 'input') {
      this.el.nativeElement.readOnly = !this.appPermissionDisable;
    }
  }
}

2. 在模板中使用指令

<!-- 字符串插值方式 -->
<button appPermissionDisable="{{permission}}">提交按钮</button>
<input type="text" appPermissionDisable="{{permission}}" placeholder="输入框" />

<!-- 推荐：属性绑定方式 -->
<button [appPermissionDisable]="permission">提交按钮</button>
<input type="text" [appPermissionDisable]="permission" placeholder="输入框" />

原代码问题的具体说明 #

• 结构型指令的核心是添加/移除DOM，而非修改元素状态，用它来控制禁用属于用法错误；
• setAttribute('disabled', 'false') 会在元素上添加disabled="false"属性，而HTML规则中只要存在disabled属性，元素就会被禁用，正确做法是直接操作element.disabled = true/false；
• 你的逻辑中，无权限时应该设置disabled=true，而非false，这也是功能失效的原因之一。

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