В 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
.