Обновление Angular Элемент Ref не работает при использовании Angular Material Buttons - PullRequest
Новая
       20

Обновление Angular Элемент Ref не работает при использовании Angular Material Buttons

1 голос
/ 10 февраля 2020

Я пытаюсь обновить отключенное свойство кнопки через директиву. Но наличие атрибута mat-raised-button на кнопке не позволит отключить кнопку. Вот мой HTML. 

<button  mat-raised-button color="primary" *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
    DISABLE USER
</button>

Тогда в моей структурной директиве я отключаю кнопку. 

@Directive({
    selector: '[hasPermission]', // tslint:disable-line
})
export class HasPermissionDirective implements OnInit {
    @Input() public hasPermission;
    @Input() public hasPermissionJustDisable = false;
    constructor(
        private viewContainer: ViewContainerRef,
        private templateRef: TemplateRef<any>,
        private permissionService: PermissionValidationService,
        private elementRef: ElementRef<any>) {
    }

    ngOnInit(): void {
        this.checkPermission();
    }

    private checkPermission() {
        this.permissionService.hasValidPermission(this.hasPermission)
            .then((hasPermission) => {
                if (!hasPermission && !this.hasPermissionJustDisable) {
                    this.viewContainer.clear();
                    return;
                }
                if (!hasPermission && this.hasPermissionJustDisable) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                    this.elementRef.nativeElement.nextElementSibling.setAttribute('disabled', 'disabled');
                    return;
                }
                this.viewContainer.createEmbeddedView(this.templateRef);
            });
    }
}

Проблема в том, что кнопка не отключается .. Но если Я удалил mat-raised-button вот так: 

            <button  *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
                DISABLE USER
            </button>

Тогда кнопка отключена. Это должно быть как-то связано с тем, как материал angular их воспроизводит. Любая помощь будет оценена.

Спасибо,

1 Ответ

0 голосов
/ 11 февраля 2020

Мне удалось решить эту проблему, обернув настройку отключения в SetTimeout примерно так: 

if (!hasPermission && this.hasPermissionJustDisable) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                    // Timeout is required for some rendering quark with angular material buttons..
                    setTimeout(() => {
                        this.renderer.setAttribute(this.elementRef.nativeElement.nextElementSibling, 'disabled', 'disabled');
                    });
                    return;
                }
...