Дочерний компонент имеет неправильное значение для «window.location.href» после перенаправления - это значение необходимо для работы значков - PullRequest
5 голосов
/ 07 марта 2020

У меня есть компонент значка, который получает пути SVG с использованием

   get absUrl() {
    return window.location.href.split('#')[0];
  }

, но проблема в том, что если вы попадаете на страницу, которая не 'найдена', и происходит перенаправление, значки перестают работать и проверяют код показывает, что URL, который он установил для каждого значка, является неправильным URL-адресом, например, ищет значок «панель управления» на странице «входа», которая не существует, URL-адрес

 https://localhost:4200/login#dashboard 

, но я на странице

https://localhost:4200/404

, поэтому ссылка должна быть

https://localhost:4200/404#dashboard 

Есть идеи, как сохранить это в синхронизации c? со страницей, на которой я нахожусь?

В противном случае все мои значки перестают работать, как только происходит перенаправление на / 404 из-за того, что страница не найдена?

РЕДАКТИРОВАТЬ:

Вот как absUrl используется в шаблоне компонента:

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  [style.fill]="color ? color : ''"
  [style.width]="size"
  [style.height]="size"
>
  <use [attr.xlink:href]="absUrl + '#' + name"></use>
</svg>

EDIT 2

В качестве временного решения я настроил перенаправление для 404 с:

  { path: '**', redirectTo: '404'},

на

  { path: '**', component: NotFoundComponent },

Но тогда люди могут ссылаться на несуществующие маршруты, поэтому я пытаюсь запустить перенаправление с самого компонента, если он обнаружит, что маршрут не является «404».

Это не работает при вызове в конструкторе, ngOnInit или даже ngOnViewInit

Но, если он вызывается где угодно, включая конструктор, внутри setTimeout с 0 мс - это будет работать и правильно отображаться.

constructor(public router: Router) {
    if (window.location.href.slice(window.location.href.length - 3) !== '404') {
      setTimeout(() => {
        this.router.navigate(['404']);
      }, 0);
    }
  }

Что заставляет меня думать, что это какая-то ошибка рендеринга с Angular. Это немного глупо и необъяснимо, но работает ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...