У меня есть компонент значка, который получает пути 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. Это немного глупо и необъяснимо, но работает ...