Как создать директиву для отключения всех типов элементов управления материалами?

#javascript #angular #angular-material

Вопрос:

Я хочу создать угловую директиву, которая при применении к любому элементу управления (элементам управления материалами), таким как matButton / matSelect / matAutcomplete и т. Д., Должна отключать управление на основе условия. Любая помощь.?

Ответ №1:

Это был бы процесс:

Создайте свою директиву, используя angular cli

ng generate directive customMatDisable

Это создаст для вас новый файл директивы .directive.ts

Внутри файла директивы манипулируйте элементом следующим образом

 import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[customMatDisable]'
})
export class CustomMatDisableDirective {
    constructor(el: ElementRef) {
       if(//condition here){
          el.nativeElement.disabled = true;
       }
    }
}

и используйте его, как показано ниже:
<button customMatDisable mat-raised-button >Button Text</button>

Обновить

Поскольку кажется, что директивы material переопределяют наш отключенный статус, поскольку его инициализация происходит после выполнения нашей директивы. Одним из обходных путей было бы сделать это следующим образом:

 import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[customMatDisable]'
})
export class CustomMatDisableDirective {
    constructor(el: ElementRef) {
       if(//condition here){
          setTimeout(()=>{
            el.nativeElement.disabled = true;
            el.nativeElement.classList.add("mat-button-disabled")
          },1) //execute after 1 ms
       }
    }
}

1. Привет… спасибо за ваше время .. но… я пробовал это … на самом деле это не работает для matbuttons… я создал stackblitz.. вы можете проверить это stackblitz.com/edit /…

2. @krishna Похоже, что наша директива была выполнена до того, как материальные элементы и их инициализация переопределили наш отключенный статус. Обходной путь заключается в том, чтобы обернуть наше утверждение в setTimeout . Я соответствующим образом обновлю ответ.

3. это отключит действие, но стили не будут обновлены …. я обновил stackblitz … можем ли мы это сделать?

4. @AdityaMenon, НЕ ставьте 1 для выполнения через 1 мс. Когда Angular находит setTimeout , он перерисовывает приложение после. кстати, лучше добавить ngOnInit

5. @krishna да, нам просто нужно добавить класс для этого, снова обновив. Показ примера для кнопки. В вашем реальном коде используйте регистр переключения, чтобы определить, к какому типу элемента он относится, и добавить соответствующий класс

Ответ №2:

Другой подход — ввести кнопки конструктора, matInput .. и отключить его

 export class CustomMatDisableDirective implements OnInit {
  constructor(
    @Optional() @Self() private control:NgControl,
    @Optional() @Self() private button:MatButton,
    @Optional() @Self() private input:MatInput,
    @Optional() @Self() private select:MatSelect,
    @Optional() @Self() private toogle:MatDatepickerToggle<any>,
  ) {}
  ngOnInit() {
    if (this.control amp;amp; this.control.control)
      this.control.control.disable()

    if (this.button)
      this.button.disabled=true
    if (this.input)
      this.input.disabled=true;
    if (this.select)
      this.select.disabled=true;
    if (this.toogle)
      this.toogle.disabled=true;
  }

См. stackblitz