角材质选项卡在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这样的变量。

检查所有组件或父组件中的此变量。如果在父组件上显示自旋器，则还应在父组件上使用相同的服务。如果正在加载，则显示旋转器。

在ngOnInit()里面你可以做

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

Answer 2

最好的方法是使用适当的加载程序。NgxSpinner是我在我的应用程序中使用的库，它运行得很好。

使用 此链接安装库

这是一个演示 链接

这些都是由库、 单击此处 to see.提供的选项。

非常简单高效！