Угловой правильный способ показать загрузку для разных компонентов одновременно? - PullRequest
Новая
       20

Угловой правильный способ показать загрузку для разных компонентов одновременно?

1 голос
/ 27 апреля 2019

В угловом 7+ веб-приложении у меня есть страница, на этой странице у меня есть 3 разных компонента, я делаю 3 разных HTTP-запроса в ngOnInit() для вычисления входов компонентов.и пока я делаю запросы, я хочу показать загрузочные счетчики для каждого компонента.

Мое текущее решение состоит в том, что у меня есть какой-то другой компонент, называемый loading-component, этот загрузочный компонент принимает 1 булеву входную переменную, и если загрузка имеет значение true, он перекрывает спиннер загрузки на компонентах внутри него.Для моей страницы, где у меня есть 3 разных компонента, HTML выглядит следующим образом: 

<div>
    <loading-component [loading]="loadingcomponent1">
       <component1 [input1]="input1"></component1>
    </loading-component>
    <loading-component [loading]="loadingcomponent2">
       <component2 [input2]="input2"></component2>
    </loading-component>
    <loading-component [loading]="loadingcomponent3">
       <component3 [input3]="input3"></component3>
    </loading-component>
</div>

component.ts: 

loading1: false;
loading2: false;
loading3: false;
input1: null
input2: null
input3: null

 ngOnInit() {
   this.loading1 = true;
   this.http.get(url1).subscribe(resp => {
       this.input1 = resp
       this.loading1 = false
   })

   this.loading2 = true;
   this.http.get(url2).subscribe(resp => {
       this.input2 = resp
       this.loading2 = false
   })

   this.loading3 = true;
   this.http.get(url3).subscribe(resp => {
       this.input3 = resp
       this.loading3 = false
   })
}

Я вычисляю 3 разные логические переменные для 3 разных загрузочных компонентов.Установите true перед HTTP-запросом, установите false после ответа.

Мой вопрос: это хороший способ или есть какой-то другой (лучший) способ справиться с этим?

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

1 Ответ

0 голосов
/ 27 апреля 2019

Не думаю, что это будет так плохо. В конце концов вам нужно сохранить флаг и счетчик для каждого компонента в вашем случае. Однако это все еще может рассматриваться как СУХОЕ нарушение, которое можно легко исправить с помощью директив. Вы можете легко создать структурную директиву, которая помещает счетчик в зависимости от предоставленной вами логической привязки.

...