Angular Material 选项卡在 ngOnInit 之后导航到选定的选项卡

Question

我想导航到新选项卡并显示加载微调器，直到搜索组件从 api 获取要显示的数据。

但选项卡仅在加载组件后导航到所选项目。有什么办法可以改变吗？

如果不是，我如何在加载组件后触发“ngOnInit()”中的代码块

我有在 returns 数据的搜索组件中执行的功能。我想显示微调器，直到有数据可供显示。

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 demo

Answer 1

您可以在注入所有组件的服务上使用变量。例如，像 isLoading 这样的变量。

检查所有组件或父组件内部的这个变量。如果您在父组件上显示微调器，您也应该在父组件上使用相同的服务。如果正在加载则显示微调器。

在ngOnInit()里面你可以做

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

Answer 2

最好的方法是使用合适的装载机。 NgxSpinner 是我在我的应用程序中使用的库，它运行良好。

使用安装库this link

这是一个演示 link

这些都是图书馆提供的选项，click here自己看

非常简单高效！

Angular Material 选项卡在 ngOnInit 之后导航到选定的选项卡

Angular Material tab navigates to selected tab after ngOnInit

typescript

angular-material

ngoninit

angular