Angular Вкладка «Материал» позволяет перейти к выбранной вкладке после ngOnInit.

Question

Я хочу переходить на новые вкладки и показывать загрузчик, пока компонент поиска не получит данные из 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

Answer 1

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

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

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

setTimeout(() => { // do an async thing there
}, 0);

Answer 2

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

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

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

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

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