Угловой - Динамический заголовок - PullRequest
Новая
       34

Угловой - Динамический заголовок

0 голосов
/ 20 мая 2018

У меня есть веб-сайт , который в настоящее время разрабатывается.

Проблема : при доступе к странице кратко отображается первая страница, а затем отображается текущая страница.

enter image description here

Пожалуйста, попробуйте обновить эту ссылку , чтобы лучше понять.Обратите внимание, что во время загрузки отображается первая страница - и после завершения загрузки отображается правильная страница.

Вопрос Что мне делать, чтобы избежать отображения главной страницы во время обновлениястраница?

Фон : каждая страница на сайте имеет различный заголовок.Мой подход:

  • Создана вспомогательная служба заголовка
  • Вспомогательная служба заголовка продолжает следить за изменением маршрута
  • В зависимости от текущего маршрута он устанавливает другой класс 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);
}

1 Ответ

0 голосов
/ 08 сентября 2018

Мое решение здесь состоит в том, чтобы в 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";
...