@HostBinding начальное значение @Input игнорируется - PullRequest
Новая
       26

@HostBinding начальное значение @Input игнорируется

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

У меня есть директива, которая помогает добавлять эффекты переключения к различным элементам. 

export class AlloyToggleDirective {
    private toggled = false;

    @Input('alloyToggled')
    @HostBinding('class.alloy-toggled')
    get isToggled() { return this.toggled; }
    set isToggled(value: boolean) {
      this.toggled = value;
      this.alloyToggledChange.emit(this.toggled);
    }
    @Output() alloyToggledChange: EventEmitter<boolean> = new EventEmitter();

    toggle() {
      this.toggled = !this.toggled;
    }

    @HostListener('click')
    onclick() {
        this.toggled = !this.toggled;
        this.alloyToggledChange.emit(this.toggled);
    }
}

При переключении работает нормально, однако начальное значение привязки игнорируется: 

<button [alloyToggled]="booleanValue">

HTML будет отражать это начальное значение, но класс применяется только после переключения программно или с помощью мыши. Есть ли странное взаимодействие, когда @HostBinding на @Input?

1 Ответ

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

Есть несколько проблем:

  • @ Определение ввода

  • Переменные синтаксического смешения

directive.ts 

@Directive({
  selector: '[alloyToggled]'
})
export class HighlightDirective {
    @Input('alloyToggled') alloyToggled: boolean;
    @HostBinding('class.alloy-toggled')
    get isToggled() { return this.alloyToggled; }
    set isToggled(value: boolean) {
      this.alloyToggled = value;
      this.alloyToggledChange.emit(this.alloyToggled);
    }
    @Output() alloyToggledChange: EventEmitter<boolean> = new EventEmitter();

    toggle() {
      this.alloyToggled = !this.alloyToggled;
    }

    @HostListener('click')
    onclick() {
        this.alloyToggled = !this.alloyToggled;
        this.alloyToggledChange.emit(this.alloyToggled);
    }
}

html

<button [alloyToggled]="booleanValue">Toggle Alloy</button>

component.ts 

export class AppComponent {
  booleanValue = true;
}

HighlightDirective, отредактированный для отражения ожидаемого поведения кода. https://stackblitz.com/edit/angular-lrmveu

Создано из Angular Пример выделения: https://stackblitz.com/angular/naavjopgege?file=src%2Fapp%2Fapp.component.html

...