Angular 五个独立的身体类别

我有一个登录屏幕和一个仪表板屏幕。这些屏幕的主体类别不同，如：

//用于仪表板
//对于登录

您可以使用

角度

中的

渲染器2

您可以使用将类添加到body

this.renderer.addClass（document.body，'dashboard'）组件中编码>

仪表板：（我添加了仪表板类）

登录：（我添加了登录类）

在
index.html
中不要这样做，这是一种不好的做法

改为在app.component中执行，方法如下：

<app-root
  [ngClass]="{
    'skin-black-light': isOnLoginPage()
    'sidebar-mini': isOnLoginPage()
    'login-page': !isOnLoginPage()
  }"
>



其中，
isOnLoginPage
是在
ts
文件中定义的一个函数，它以某种方式（例如，通过url）确定用户是否在登录页上。
您可以创建一个指令，该指令根据登录屏幕或仪表板屏幕添加类。@BasavarajBhusani-我需要在哪里编写该指令？我如何以及在哪里可以访问相同的内容？如果你能把这个解释为你的答案，那就太好了。
import { Renderer2, ElementRef, OnDestroy } from '@angular/core';


export class loginComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'login');
   }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'login');
  } 
}  

<app-root
  [ngClass]="{
    'skin-black-light': isOnLoginPage()
    'sidebar-mini': isOnLoginPage()
    'login-page': !isOnLoginPage()
  }"
>