Класс динамических тегов в Angular17+
Моя панель навигации не реагирует на смену страницы.
Мой app.component.html
<html>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</html>
Этот тег начинает мой сегмент navbar.component.html
<nav class = "navbar navbar-expand-md justify-content-center" + {{navType}}>
Если это важно, вот идея на странице компонентаnavType: string = "nav-other";
if (this.router.url === '') {
this.navType = "navbar navbar-expand-md justify-content-center nav-splash";
}
Были опробованы следующие:
<nav class = "navbar navbar-expand-md justify-content-center + {{navType}}">
<nav [ngClass] = {{navType}}> // With full class exchanged for editing one word
<nav [ngClass] = "navType"> // With full class exchanged for editing one word
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
1
52
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вам нужно использовать Angular Router для прослушивания изменений маршрута, а затем обновить свой navType.
ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
if (event.url === '' || event.url === '/') {
this.navType = 'nav-splash';
} else {
this.navType = 'nav-other';
}
}
});
}<nav class = "..." [ngClass] = "navType"></nav>Посмотрите этот пример на stackblitz
Другие вопросы по теме
Как создать гиперссылку в файле Typescript? Угловой 16+
Как установить новое значение для «Сигнала», который вызывается из «Эффекта»?
В реальном времени: false не работает в jQuery DataTables colReorder
Angular 17 и dot net Core 8 – добавление Jwt при обновлении в аудиторию
Как добавить метод POST в Angular SSR — Server?
Радиокнопка Angular снимает флажки с других элементов управления при выборе
Проверьте, находится ли номер в диапазоне
Сопоставьте значения из NgForm с моделью машинописного текста, определенной в Angular
Фильтровать вложенный столбец в таблице PrimeNG (Angular)
Npm не может разрешить дерево зависимостей до удаления node_modules
Похожие вопросы
Множественные кавычки в команде php echo
Угловая кнопка исчезает на прокручиваемых страницах
HTML-аудиоэлемент отключен, хотя src верен
CSS Grid перемещает столбцы при изменении размера экрана
Проблемы с функциями печати в Microsoft Edge версии 126.0.2592.61 (официальная сборка) (64-разрядная версия)
Почему window.localStorage не сохраняет мои сохраненные объекты при загрузке новой HTML-страницы?
Невозможно одновременно получить липкую строку и столбец из-за переполнения-x
CSS, как анимировать div с дочерним элементом «позиция: фиксированная»
Замена нескольких тегов между значениями
Z-index не работает с элементами, связанными с анимацией gsap
пожалуйста, поделитесь, как вы обновляете
navType, когда страница меняется, если возможно, рабочий стекблиц с воспроизведенной проблемой