Question

我目前正在开发website。

问题：访问页面时，会暂时显示首页 - 然后会显示当前页面。

请尝试刷新此link以更好地理解。请注意，在加载时，会显示首页 - 加载完成后，将显示正确的页面。

问题如何避免在刷新页面时显示首页？

背景：website中的每个页面都有不同的标题。我的方法：

创建标头帮助程序服务
Header helper service继续关注路由更改
根据当前路由，它在标题组件模板上设置不同的css类。如果用户在没有刷新页面的情况下浏览网站，这将非常有效。
请参阅下面的html和标题帮助服务代码

<div [ngClass]="{'no-hero': headerType === 400, 'restaurant-page': headerType === 200, 'restaurant-list': headerType === 300}"
    class="top-section">
  <div class="top-section-bg">
  </div>
 // Code removed for brevity
</div>

private setHeaderType(): void {
  if (this.currentUrl.includes("search-restaurants")) {
    this.headerType = HeaderType.restaurantSearch;
  } else if (this.currentUrl.includes("profile") || this.currentUrl.includes('faqs') || this.currentUrl.includes('bookings')) {
    this.headerType = HeaderType.noHero;
  } else if (this.currentUrl === "/") {
    this.headerType = HeaderType.home;
  } else {
    this.headerType = HeaderType.restaurantDetail;
  }
  this.headerTypeSource.next(this.headerType);
}

Answer 1

我在这里的解决方案是在index.html中具有一些样式，如纯文本，硬编码样式，这些样式会在重新加载时隐藏首页。又叫。

index.html

<html>
    <style>
    .loading-overlay {
        z-index: 99;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        color: red;
    }

    .loading-overlay--hide { display: none; }
    </style>

    <div class="loading-overlay"></div>
</html>

当有角靴时，我只是这样做以隐藏装载机

document.getElementById('full-page-loader').className += " full-page-loader--hide";

Angular - 动态标题

1 个答案: