Angular 4 Остановить перезагрузку компонента
Я хочу, чтобы мой компонент был устойчивым. Сейчас это работает так: он перезагружается каждый раз, когда вы переходите на другую страницу. Но я хочу, чтобы он работал так, чтобы он не перезагружался. Вы видите, что у меня есть шатер в заголовке, и когда-нибудь страница перезагружается. так что это не очень функционально.
Вы можете увидеть "заголовок" синим цветом. У него есть лента новостей, похожая на слайдер, и каждый раз, когда вы переходите на другую страницу, он перезагружает слайдер. Поэтому мне нужно, чтобы компонент перестал перезагружаться, когда он переходит на другую страницу.
-----------------ОБНОВИТЬ---------------
код для HTML
<div class = "row page-header">
<div class = "col-sm-3 align-left"><img class = "customer-logo" [src] = "_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,'+ kioskservice.getLogo())"/></div>
<div class = "col-sm-6 align-center"><marquee direction = "left" scrollamount = "5" behavior = "scroll">{{translationservice.getExpression("Appointment.AddEdit_PostalCodeServiceError")}}</marquee></div>
<div class = "col-sm-3 align-right"><i class = "far fa-clock"></i>{{ clockservice.time | date:"HH:mm" }}</div>
</div>
Как компоненты вызываются на страницы
<page-header></page-header>
Я его обновил! если у вас есть еще вопросы, задайте их и я предоставлю
Ответы 1
Вы не предоставили никакого кода, поэтому я просто предполагаю, что у вас есть базовое приложение с <router-outlet> в app.component.html.
Цель этого состоит в том, что каждый раз, когда ваше приложение получает новый маршрут, Angular Router находит компонент, имеющий соответствующую запись маршрутизации в app.module для него, в RouterModule.forRoot(....).
любой компонент, который вы визуализируете таким образом, будет уничтожен, если маршрут изменится и загрузится другой компонент.
Что вы можете сделать, чтобы предотвратить это:
- вставьте компонент в app.component напрямую. Таким образом, он будет отображаться всегда - и вы не будете использовать розетку роутера. Заголовок зафиксирован в app.component.html. Вы можете скрыть его от рендеринга с помощью
*ngIfи некоторых базовых сервисов, если вам все еще нужно скрыть его на некоторых маршрутах. - вставьте компонент в другой маршрутизатор
Обновлять: Итак, ваш app.component.html выглядит примерно так:
<some random tags>
<router-outlet></router-outlet>
</some random tags>
измените его на что-то вроде этого:
<some random tags>
<your-header-tag-name></your-header-tag-name>
<router-outlet></router-outlet>
</some random tags>
Вы можете получить к нему доступ с помощью @ViewChild из app.component.ts
Спасибо @ForestG, а как мне вставить компонент напрямую в app.component? Мне просто нужно, чтобы компонент перестал перезагружаться, когда вы переходите на другую страницу.
Я поместил свой компонент <page-header> в файл app.component.html. Он находится прямо над <router-outlet>. <page-header * ngIf = "! translationservice.loading"> </page-header> Но все равно не работает
Работает наполовину! Большое спасибо. У меня есть несколько страниц. которые все еще перезагружают его. Я не могу понять, почему они все еще перезагружают его. Есть ли более простой способ поговорить с вами, чтобы я мог легче показать вам свою проблему, лол
Я собираюсь назвать это на весь день, но если вы представите свой код, например, в пример stackblitz и вашу конкретную проблему, то я уверен, что кто-то может помочь вам в этом сообществе. (или я на следующей неделе).
Не могли бы вы поделиться кодом шаблона, в котором вы объявляете свой компонент?