Вкладка Angular Material переходит на выбранную вкладку после ngOnInit

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

Но вкладка переходит к выбранному элементу только после загрузки компонента. Есть ли способ это изменить?

Если нет, то как я могу запустить блок кода, который у меня есть внутри `ngOnInit () 'после загрузки компонента

У меня есть функция для выполнения в компоненте поиска, который возвращает данные. Я хочу отображать счетчик, пока данные не будут доступны для отображения.

export class SearchComponent implements OnInit {
isLoading= true;
  constructor() { }

  ngOnInit() {
    console.log('loaded');
    // api call here to get data
    //show spinner untill we get response from api
    this.isLoading = false;
  }

}
<mat-spinner *ngIf="isLoading"></mat-spinner>

Но теперь, когда он у меня внутри Oninit(), я перехожу к поиску только после того, как данные станут доступны. Таким образом, для перехода на эти вкладки существует задержка в 4-5 секунд.

демонстрация Stackblitz


typescript angular angular-material ngoninit
person IamGrooot    schedule 02.03.2020    source источник
comment
что вы имеете в виду, если нет, как я могу запускать события, которые у меня есть внутри `ngOnInit () 'после загрузки компонента   -  person canbax    schedule 02.03.2020
comment
Что вы имеете в виду под component loads? Вы имеете в виду загрузку только пользовательского интерфейса или некоторых данных из API?   -  person Mridul    schedule 02.03.2020
comment
@canbax Я обновил вопрос. Надеюсь, теперь это имеет смысл   -  person IamGrooot    schedule 02.03.2020
comment
@Mridul данные из API. Пока данные не будут доступны, я хочу отобразить счетчик   -  person IamGrooot    schedule 02.03.2020
comment
@NareshShetty, ты так хочешь? stackblitz.com/edit/angular-material-tab-example-prsdpm .. Если вы нажмете на вкладку поиска, данные будут загружены из api до тех пор, пока вы не увидите mat-spinner ..   -  person Maniraj Murugan    schedule 02.03.2020
comment
В подписке на вызов API после получения данных вы можете установить для флага isLoading значение false. Так что до тех пор, пока у вас не будет загрузчика данных, будет отображаться.   -  person Pujan Shah    schedule 02.03.2020
comment
@NareshShetty, вам нужно взять логический флаг, чтобы показать / скрыть счетчик на основе запроса и ответа Api. вы должны сделать это в своем дочернем компоненте.   -  person Mridul    schedule 02.03.2020
comment
@Mridul показывает, что прядильщик не был проблемой. mat-tab не переходил к дочернему компоненту, пока не получил данные. Как было предложено в canbax ответе, я могу сделать это, используя setTimeout() в дочернем компоненте   -  person IamGrooot    schedule 02.03.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать переменную в службе, которая внедряется во все компоненты. Например, такая переменная, как isLoading.

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

внутри ngOnInit() вы можете просто сделать

setTimeout(() => { // do an async thing there
}, 0);
person canbax    schedule 02.03.2020
comment
Я хочу показать счетчик в дочернем компоненте. А дочерний компонент виден только после того, как он получит данные. поскольку mat-tab переходит к содержимому выбранной вкладки только после полной загрузки компонента. - person IamGrooot; 02.03.2020

arrow_upward
0
arrow_downward

Лучше всего использовать подходящий загрузчик. NgxSpinner - это библиотека, которую я использовал в своем приложении, и она отлично работает.

Установите библиотеку, используя эту ссылку

Это демонстрация ссылка

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

очень просто и эффективно!

person Lajwat Kumar    schedule 02.03.2020