如何创建一个角指令来禁用输入字段
提问于 2021-11-12 14:36:18
我正在尝试创建一个应用于输入和按钮的指令，该指令将根据从服务获得的条件禁用元素。
我已经进行了审查，并尝试了以下几点：
- Button @Directive to bind disable attribute via @Input in Angular
- Angular2 attribute directive Hostbinding to host attribute
- I已经尝试过只为HostBinding使用
disabled，但我得到了Can't bind to 'disabled' since it isn't a known property of 'button'. - I尝试过使用
attr.disabled，但是我得到Attempted to set attribute `disabled` on a container node. Host bindings are not valid on ng-container or ng-template. - I肯定不是要绑定到ng-容器或ng-模板，而是直接绑定到按钮或输入，如下面的
- 示例所示，我可以使用
[disabled]="condition"直接绑定到禁用的位置，但这不是我想要的
。
以下是我目前对该指令的看法：
export class InputPermissionsDirective {
@Input() set appCanModify(name:string) {
this.canModify(name);
}
@HostBinding('disabled') disabled:boolean = false;
constructor(private permissionsService:PermissionsService) { }
private canModify(name:string) {
const routePermissions = this.permissionsService.getPermissionsByRoute(window.location.pathname);
if(!routePermissions) this.disabled = true;
else {
const componentPermissions = this.permissionsService.getPermissionsByComponentName(routePermissions, name)
if(componentPermissions && componentPermissions.CanModify) this.disabled = false;
else this.disabled = true;
}
}
}在这里，权限服务查询与输入名称关联的权限级别(在下面的示例中是FooBar)。在那里，应该根据元素的权限字段CanModify设置禁用的属性。
下面是我使用这个指令的一个例子：
<input type="text" class="form-control" [(ngModel)]="foo" *appCanModify="'FooBar'">任何帮助在这里将非常感谢，我可以提供更多的信息，视需要。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-15 06:07:44
解决我的问题的办法是，我试图使用星号将这个指令作为结构指令使用。相反，我需要使用它作为appCanModify
感谢@MikkelChristensen的解决方案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69949755
复制相关文章
相似问题
如何在单击按钮时将纵向模式更改为横向模式？
单击按钮将垂直屏幕模式更改为水平屏幕模式
如何通过单击按钮将android更改为静默模式？
如何将jQuery模式更改为React模式？
将网格模式更改为列表模式
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
