В Angular, для задания дополнительного класса для разных страниц можно использовать директиву HostBinding. Директива HostBinding позволяет задать свойства элемента, на котором она расположена, включая классы.
Для начала, создайте новую директиву с помощью команды ng generate directive <имя_директивы> в терминале или командной строке. Например, если вы хотите назвать директиву "AddBodyClassDirective", команда будет выглядеть следующим образом: ng generate directive AddBodyClassDirective.
Angular CLI создаст для вас новый файл с именем <имя_директивы>.directive.ts (в нашем примере AddBodyClassDirective.directive.ts), который будет содержать следующий код:
import { Directive, HostBinding } from '@angular/core';
@Directive({
selector: '[appAddBodyClass]'
})
export class AddBodyClassDirective {
@HostBinding('class') classes = '';
constructor() { }
}
В этом коде мы импортируем необходимые модули (Directive и HostBinding), а затем объявляем новую директиву с селектором [appAddBodyClass]. appAddBodyClass - это атрибут, который мы будем использовать на элементе body для привязки директивы.
Затем, мы добавляем свойство с именем classes и аннотацией @HostBinding('class'). Это свойство будет содержать список классов, которые мы хотим добавить к элементу.
Теперь у нас есть базовая структура директивы. Чтобы добавить классы к элементу body, нам нужно внести некоторые изменения в эту директиву.
import { Directive, HostBinding, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Directive({
selector: '[appAddBodyClass]'
})
export class AddBodyClassDirective implements OnInit {
@HostBinding('class') classes = '';
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
const currentUrl = event.url;
// Здесь можете указать свои условия для привязки дополнительного класса к body.
// Например:
if (currentUrl === '/home') {
this.classes = 'home-page';
} else if (currentUrl === '/about') {
this.classes = 'about-page';
}
}
});
}
}
Для привязки дополнительного класса к элементу body, мы используем сервис Router из Angular Router, чтобы слушать события навигации. В методе ngOnInit мы подписываемся на события NavigationEnd и проверяем текущий URL. Затем мы устанавливаем значение свойства classes в соответствующий класс, в зависимости от текущего URL.
В приведенном примере, если текущий URL равен '/home', то мы устанавливаем значение свойства classes в 'home-page'. Если текущий URL равен '/about', то мы устанавливаем значение свойства classes в 'about-page'.
Теперь, чтобы использовать новую директиву, добавьте атрибут [appAddBodyClass] к элементу body в нужных компонентах шаблона.
<body appAddBodyClass> <!-- Остальной HTML-код --> </body>
Обратите внимание, что для использования директивы appAddBodyClass, вы должны добавить ее в секцию declarations модуля, в котором используется компонент, содержащий элемент body.