Пользовательская директива не работает с директивой mat-menu-item - может возникнуть проблема с упорядочением - PullRequest
Новая
       12

Пользовательская директива не работает с директивой mat-menu-item - может возникнуть проблема с упорядочением

1 голос
/ 09 октября 2019

Я пытаюсь написать пользовательскую директиву, которая будет отключать кнопку (и выполнять другую логику) для кнопки, которая содержится в меню 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?

Заранее большое спасибо.

ОБНОВЛЕНИЕ

Я пытался использовать @HostBinding в своей пользовательской директиве, например 

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

ngOnInit() {
    this.disabledAttribute = true;
  }

, но, похоже, это тоже не работает.

1 Ответ

0 голосов
/ 09 октября 2019

Попробуйте эту альтернативу

Поскольку директива mat-menu-item отключила свойство input, вы можете получить доступ к свойству disabled с помощью шаблона 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>

Пример

...