在Angular 9中,[disabled]、[attr.disabled]和[attr.readonly]属性选择器可能不起作用的原因是由于Angular的视图封装机制。在某些情况下,这些属性选择器可能不适用于选择器。
为了解决这个问题,你可以使用ngClass指令将这些属性绑定到CSS类上,然后通过类选择器来控制元素的禁用或只读状态。
下面是一个示例代码,演示了如何使用ngClass指令来解决这个问题:
HTML模板:
CSS样式:
.disabled {
pointer-events: none;
opacity: 0.6;
cursor: not-allowed;
}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
isDisabled = true;
}
在这个示例中,我们使用ngClass指令将一个名为"disabled"的CSS类绑定到按钮上。当isDisabled属性为true时,按钮将被禁用,并应用"disabled"类的样式。
请注意,你可以根据自己的需求修改CSS样式,以适应你的应用程序的设计和风格。