Angular - 动态标题

Question

我有一个website目前正在开发中。

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

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

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

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

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

<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 - 动态标题

问题描述投票：2回答：1

1个回答

最新问题

Angular - 动态标题

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1