Question

我有一个自定义按钮，例如：

<my-button [permission]="'NONE'" [disabled]="!projectForm.valid" type="submit">
   Save
</my-button>

如果权限为“无”，则必须禁用按钮。因此，我在指令中这样做：

permission.directive.ts

@Input() public readonly permission: string;

constructor(
    private readonly element: ElementRef,
    private readonly ref: ChangeDetectorRef
) {}

public ngOnInit() {
    if (this.permission === 'NONE') {
       this.element.nativeElement.disabled = true;
   }
}

但是，它不会禁用按钮。我尝试更改按钮的颜色，效果很好：

this.element.nativeElement.style.color = 'blue';

由于颜色更改有效，所以我认为可能需要触发更改检测：

this.element.nativeElement.disabled = true;
this.element.nativeElement.style.color = 'blue';

结果仍然相同，更改了颜色，但未禁用该按钮。

由于我的按钮是 button 的包装，我尝试禁用按钮元素本身，但是结果是相同的（未禁用）。

this.element.nativeElement.children[0].disabled = true;

此后，我认为既然style.color有效，将其style.display设置为“ none”也可以。不幸的是，这也没有解决。有人知道为什么更改颜色能完美地工作，而更改禁用或显示状态却不行吗？

Answer 1

您可以使用CSS类来实现相同的行为，而不是使用ElementRef（由于XSS攻击，请谨慎使用Angular官方文档声明here）或任何自定义指令。

以下CSS类可能适用于按钮，您可以为不同的元素创建自定义按钮。

.disabled {
   pointer-events: none;
   user-select: none;
   color: grey;
   cursor: none;
}

Answer 2

为什么不只是：

<my-button [disabled]="!projectForm.valid || permission === 'NONE'" type="submit">
   Save
</my-button>

Answer 3

@Dino，使用吸气剂设置Disabled元素。nativeElement

@Input()
set disabled(value)
{
     this.element.nativeElement.disabled = value; 
}
<my-button [disabled]="!projectForm.valid || permission === 'NONE'" ..>

//or
@Input()
set disabled(value)
{
     this.element.nativeElement.disabled = value || this.permision=='NONE'; 
}
<my-button [permission]="'NONE'" [disabled]="!projectForm.valid"...>

Answer 4

尝试使用 ngAfterViewChecked()。

export class TutorialDirective implements AfterViewChecked {
disable = true;

constructor(private el: ElementRef) { }

ngAfterViewChecked(): void {
  this.el.nativeElement.disabled = true;
  }
}

禁用指令中的自定义按钮

4 个答案: