如何创建Angular自定义指令实现基于权限服务的输入框按钮禁用功能

开发者阿泽

2026-9-27

问题根源

你遇到的报错核心原因是指令使用时加了*前缀：Angular中带*前缀的指令属于结构指令，框架会自动将宿主元素包裹在<ng-template>容器内渲染，你在指令中声明的@HostBinding实际作用在了这个自动生成的容器节点上，而非你定义的<input>/<button>元素，因此触发了容器节点无法绑定disabled属性的报错。

修复方案

第一步：修改指令使用方式

去掉*前缀，改用普通属性指令的绑定语法即可，修改后的使用示例如下：

<input type="text" class="form-control" [(ngModel)]="foo" [appCanModify]="'FooBar'">
<button [appCanModify]="'FooBar'">提交</button>

第二步：可选优化指令代码

你现有的指令逻辑本身没有问题，如果你担心部分自定义组件不存在原生disabled属性，也可以调整@HostBinding的绑定目标，同时增加空值兼容优化：

import { Directive, Input, HostBinding } from '@angular/core';
import { PermissionsService } from './permissions.service';

@Directive({
  selector: '[appCanModify]' // 确保选择器是属性型选择器
})
export class InputPermissionsDirective {
  @Input() set appCanModify(name: string) {
    this.canModify(name);
  }
  // input/button原生支持disabled属性，不需要加attr前缀
  @HostBinding('disabled') disabled: boolean = false;

  constructor(private permissionsService: PermissionsService) { }

  private canModify(name: string): void {
    // 兼容空参数异常场景
    if (!name) {
      this.disabled = true;
      return;
    }
    const routePermissions = this.permissionsService.getPermissionsByRoute(window.location.pathname);
    if (!routePermissions) {
      this.disabled = true;
      return;
    }
    const componentPermissions = this.permissionsService.getPermissionsByComponentName(routePermissions, name);
    this.disabled = !(componentPermissions?.CanModify ?? false);
  }
}