Question

我正在尝试编写一个自定义指令，该指令将针对包含在mat菜单中的按钮设置为禁用（并执行其他逻辑）。为了简单起见，我删除了很多代码，但请在此处使用我的HTML模板

<mat-menu #editMenu="matMenu">
    <ng-template matMenuContent>
      <button
        mat-menu-item
        myCustomDirective>
        Button Number 1
      </button>
      <button mat-menu-item>
        Button Number 2
      </button>
    </ng-template>
</mat-menu>

现在这是我的自定义指令，非常简单

@Directive({
    selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit {

constructor(public renderer: Renderer2, public el: ElementRef) {}

ngOnInit() {
// set the item to disabled... logic has been removed for example
this.renderer.setAttribute(this.el.nativeElement, 'disabled', true);
}

现在我的自定义指令不起作用，或者似乎被mat-menu-item指令覆盖/呈现。我是否应该移动mat-menu-item的自定义指令才能正常工作。在AngularJS中，您可以订购指令，但是不确定在Angular 6中是否可以执行。我尝试使用setTimeout来延迟mat-menu-item呈现后的指令，但这也不起作用。有谁知道我如何才能使这两个指令在同一个HTML元素上工作？

非常感谢。

UPDATE

我尝试在自定义指令中使用@HostBinding，就像这样

@HostBinding('attr.disabled') disabledAttribute: boolean;

ngOnInit() {
    this.disabledAttribute = true;
  }

但这似乎也不起作用。

Answer 1

尝试其他选择

由于mat-menu-item指令已禁用输入属性，因此您可以使用模板ref来访问已禁用属性，并将其作为输入传递给customDirective并动态设置为禁用

<mat-menu #editMenu="matMenu" >
    <ng-template matMenuContent >
      <button #ref [appCustomDirective]="ref"
        mat-menu-item
        >
        Button Number 1
      </button>
      <button #ref2 mat-menu-item [appCustomDirective]="ref2">
        Button Number 2
      </button>
    </ng-template>
</mat-menu>

https://www.primefaces.org/showcase/ui/ajax/selector.xhtml

自定义指令不能与mat-menu-item指令一起使用-订购可能是一个问题

1 个答案: