Отключение указателя мыши при выполнении вызова api в angluar

#angular

Вопрос:

Я не уверен, что это правильный способ сделать это, но то, что я делаю прямо сейчас, заключается в том, что, когда некоторые из моих дочерних компонентов выполняют вызовы API, мы не хотим, чтобы люди могли отправлять спам-вызовы click несколько раз, поэтому я создал sharedservice, который есть у моего самого верхнего родительского компонента в его init, который получает логическое значение «loading» от дочерних компонентов всякий раз, когда они вызывают API, который отключает действия мыши. Но когда я делаю это, мой родительский компонент выдает ошибку в консоли.

 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous value: 'pointer-events: auto'. Current value: 'pointer-events: none'

 public loading: boolean: true;

ngOnInit() {
  this._sharedData.loading.subscribe(value => {
    this.loading = value;
  })
}

Есть ли более чистый способ сделать это? Или какой-либо способ предотвратить эту ошибку?

1. при загрузке true вместо этого установите класс в теле, .pointerNone{событие указателя: нет}

2. Вы также можете отключить кнопку в зависимости от условий загрузки

3. Хм, да, это то, что я делал. Итак, когда я делаю это и устанавливаю условный класс в моем HTML на самом верхнем уровне для изменения события указателя в зависимости от моего логического значения загрузки, это выдает мне ошибку консоли. Не кажется, что это имеет большое значение (? возможно, это так) но раздражает, что эта ошибка выдается каждый раз, когда я выполняю вызов API, lol.

Ответ №1:

Вы можете установить класс в главном контейнере. всякий раз, когда вызывается служба.

 public loading: boolean: true;

ngOnInit() {
  this._sharedData.loading.subscribe(value => {
    this.loading = value;
  })
}

В HTML

 <div [ngClass]="{'pointerNone': loading}"></div>

CSS

 .pointerNone{
  pointer-events: none
}