javascript - 使用指令将禁用设置为角度材料组件
问题描述
正如标题所说,我正在尝试使用指令将禁用设置为材质组件。我尝试了各种方法,使用 ElementRef、Renderer、Renderer2 和 querySelector。似乎没有任何工作。
这是我的代码。任何帮助表示赞赏。
import { Directive, Input, TemplateRef, ViewContainerRef, Renderer2, ElementRef } from '@angular/core';
import { PermissionType } from './permission-type.enum';
import { Resource } from './resource.enum';
import { PermissionManagerService } from './permission-manager.service';
@Directive({
selector: '[appIsGranted]'
})
export class IsGrantedDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private permissionManagerS: PermissionManagerService,
private _renderer: Renderer2,
private el: ElementRef
) { }
@Input() set appIsGranted(permission: Array<string>) {
this.isGranted(
permission[0] as Resource,
permission[1] as PermissionType
)
}
private isGranted(resource: Resource, permissionType: PermissionType) {
if(this.permissionManagerS.isGranted(resource, permissionType)) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
let view = this.viewContainer.createEmbeddedView(this.templateRef);
let rootElem = view.rootNodes[0];
//this.el.nativeElement.disabled = true;
//this.el.nativeElement.disabled = 'disabled';
//this._renderer.setProperty(rootElem, 'disabled', true);
this._renderer.setProperty(rootElem, 'disabled', 'disabled');
// this.viewContainer.clear();
}
}
}
例如,这个按钮图标是我试图禁用的。
<button mat-icon-button class="action--icon" matTooltip="Notes" matTooltipPosition="above" (click)="openNotesDialog(element.earningsFileId)" *appIsGranted="['EARNINGS', 'viewearnings']">
<mat-icon>chat</mat-icon>
</button>
这个想法是,只需将属性添加disabled
到所有材料组件,这将适用于所有材料项目。
解决方案
我们通过一个指令在我们的应用程序中做类似的事情,该指令传递了运行与其设置的元素关联的操作所需的角色列表。
它通过使用 JQuery 的方法attr
来设置disabled
和其他属性来工作。
指令;
@Directive({
selector: '[appEditEntityActions]'
})
export class EditEntityActionsDirective implements OnInit {
@Input() requiresAnyRole: string[] = null;
constructor(
private authorizationService: AuthorizationService,
private element: ElementRef) { }
ngOnInit() {
var userCanEdit = this.authorizationService.hasAnyClaim(this.requiresAnyRole);
if (!userCanEdit) {
this.turnOffElement();
}
}
private turnOffElement(): void {
var jqElem = $(this.element.nativeElement);
jqElem.off();
jqElem.find('*').off();
// app-opac-50-disabled-cursor-not-authorized is a css class that sets cursor, transparency etc...
jqElem
.attr('disabled', 'disabled')
.attr('href', '')
.addClass('app-opac-50-disabled-cursor-not-authorized')
.attr('title', 'Not authorized');
jqElem
.find('button')
.addClass('text-muted')
.attr('disabled', 'disabled');
jqElem.find('a')
.attr('href', '')
.addClass('app-opac-50-disabled-cursor-not-authorized');
jqElem.on('click', (e: Event) => {
e.preventDefault();
});
}
}
用法;
<button appEditEntityActions [requiresAnyRole]='["Viewer", "Editor"]' (click)="doSomething();">Sample button</button>
希望它可以帮助你。
推荐阅读
- r - 根据滞后(前)组排列/排序分组数据帧
- regex - Match url path and ip address from string
- c# - 检查 int 不等于特定值
- javascript - axios statusText 始终为空
- c++ - 使用 -shared LDFLAG 为 iOS (arm64) 编译 Clang - Exec 格式错误
- angular - 在新的 nx 工作区中创建自定义 .editorconfig、.eslintrc.json 和 .prettierrc
- java - 使用 spark 和 java 比较和突出两个数据帧的差异
- javascript - How to get values of dynamic/multiple fields on formsubmit with React?
- python - 如何访问/共享来自不同 Colab 笔记本的数据集
- javascript - 如何在方法中使用获取的数据作为参数