0

我在 Angular 9 中为我的应用程序创建了一个骨架结构。骨架代码在 ngAfterViewInit()钩子中初始化。 

ngAfterViewInit() {
    this.showSpinner = false;  
     this.interval = setInterval(() => {  
       this.domLoaded = true;
     }, 5000);
}

但是每次我加载此页面（或从任何其他路线导航后再次访问）时，它仍然会触发事件以显示骨架。我希望骨架只显示在第一个加载应用程序上。

我也用过ngAfterContentInit()但是没用

4

3 回答 3

1

有很多方法可以解决这个问题（另外，我同意 Pardeep 的评论 - 你应该寻找其他方法）但坚持你的问题，尝试将状态保存在 localStorage/sessionStorage 中，以便信息是导航到您网站中的其他页面后不会丢失。所以这样的事情会起作用：

ngAfterViewInit() {
  this.showSpinner = false; 
  if (!sessionStorage.getItem('siteInit')) {  
   this.interval = setInterval(() => {  
    this.domLoaded = true;
    sessionStorage.setItem('siteInit', 'true');
   }, 5000);
  } else {
   this.domLoaded = true;
  }
}
于 2020-06-24T10:05:15.757 回答
0

ngAfterViewInit()每次都调用生命周期挂钩，加载您的组件。要实现您所需的功能，您可以使用单例服务并在那里设置domLoaded属性。

于 2020-06-24T09:58:10.387 回答
0

假设您放置<router-outlet></router-outlet>在 中app.component.ts，该组件将只加载一次，随后的导航将在应用程序内进行（单页应用程序的好处）。

因此，如果这是您需要的，您可以在此处运行代码。

如果您只想在用户第一次访问您的页面时运行代码而不运行它以进行后续刷新，您可以使用浏览器本地存储来跟踪状态（标记是否是第一次访问页面）。然后，您需要检查每个页面加载是否需要运行代码。

与您的问题密切相关，如果您正在跟踪 a 的状态spinner，您很可能希望它在每次页面刷新时运行。为此，您可以将其状态保存在服务而不是本地存储中。

旁注：访问浏览器的本地存储比访问已经在内存中的变量效率低得多。

于 2020-06-24T10:10:38.957 回答