使用指令将禁用设置为 angular 材料组件

Question

正如标题所说，我正在尝试使用指令将禁用设置为材质组件。 我尝试了各种方法，使用 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的属性添加到所有材质组件，这将适用于所有材质项目。

Answer 1

我们通过一个指令在我们的应用程序中做类似的事情，该指令传递了运行与其设置的元素关联的操作所需的角色列表。

它通过使用 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>

希望它可以帮助你。