Угловое использование $ event.target или ViewChild ... есть ли разница? - PullRequest
Новая
       85

Угловое использование $ event.target или ViewChild ... есть ли разница?

0 голосов
/ 12 декабря 2018

Мне часто хочется отключить кнопку после ее нажатия в форме.Поэтому я делаю что-то вроде этого: 

<button (click)="complete($event.target)">

, а затем в своем файле машинописи я отключаю его до тех пор, пока действие не будет выполнено следующим образом: 

complete(button: HTMLButtonElement): void {
    button.disabled = true;

    this.service.doSomething.subscribe(..., ..., () => button.disabled = false);
}

Я мог бы добиться того же самогопометив кнопку, а затем вместо нее используйте ViewChild.Помимо личных предпочтений, есть ли веская причина использовать одно против другого?

1 Ответ

0 голосов
/ 12 декабря 2018

@ViewChild в основном для случаев, когда вам нужен экземпляр компонента и его свойств, обычно как родительский компонент, абстрагирующий некоторую логику от дочернего элемента.Вы получаете весь дочерний класс как свойство родительского класса и можете делать с ним все, что захотите.Он также используется в качестве одного из методов для извлечения DebugElement из DOM.

Связывание с шаблоном можно рассматривать как взаимодействие с компонентом через его «API».Он делает Inputs и Outputs доступными для компонента, который использует его в ситуациях, когда эти взаимодействия могут обеспечить полную функциональность.Angular обрабатывает эти входы и выходы в своей собственной зоне и изменяет циклы обнаружения.

Сказав, что использование @viewChild для получения компонента позволит вам взаимодействовать с ним напрямую так же, как с шаблоном.связывание, хотя часто для этого нет особых причин.

Сказав это, вы говорите о том, чтобы вытянуть @ViewChild элемента HTML.Существует множество причин, по которым вы не должны взаимодействовать с DOM напрямую в Angular.Фреймворк полностью абстрагирует DOM от кода, и для этого есть причин.

Я думаю, что лучшей практикой здесь было бы позволить компоненту представлять состояние кнопки и разрешать Angular изменять представление дляyou: 

<button (click)="complete($event.value)" [disabled]="formDisabled">

component.ts: 

public formDisabled = false;

complete(value: string): void {
    this.formDisabled = true;

    this.service.doSomething.subscribe(..., ..., () => this.disabled = false);
}

Это позволяет обнаружению изменения углового маркера и визуализации представления в рамках, в то время как сам компонент представляет состояние.

ЭтоNgForms может стать еще более привлекательным, поскольку вы можете привязать свойство disabled к самому состоянию формы.Есть даже несколько хуков для ожидающих состояний отправки и асинхронных валидаторов! .

...