如何创建Angular指令来禁用输入字段

Question

我正在尝试创建一个应用于输入和按钮的指令，该指令将根据我从服务中获得的条件禁用元素。

我已经复习了，并尝试了以下内容：

• 按钮@指令通过Angular中的@Input绑定禁用属性
• Angular2属性指令主机绑定到主机属性
• 我尝试过只使用disabled进行HostBinding，但我得到了Can't bind to 'disabled' since it isn't a known property of 'button'.
• 我试过使用attr.disabled，但后来我得到了Attempted to set attribute `disabled` on a container node. Host bindings are not valid on ng-container or ng-template.
• 我确信我并没有试图绑定到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来设置disabled属性。

这里有一个我使用这个指令的例子：

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

如果有任何帮助，我们将不胜感激，我可以根据需要提供更多信息。谢谢

Answer 1

我的问题的解决方案是，我试图通过使用星号将此指令用作结构指令。相反，我需要将其用作appCanModify

感谢@MikkelChristensen的解决方案