Угловой 5 отдельных классов тела - PullRequest
Новая
       6

Угловой 5 отдельных классов тела

0 голосов
/ 04 мая 2018

У меня есть экран входа в систему и экран приборной панели. Классы тела для этих экранов различны как: 

<body class="hold-transition skin-black-light sidebar-mini" > // for dashboard
<body class="hold-transition login-page"> // for login

Точкой входа в мой угловой проект 5 является index.html. Как я могу отделить тело, основываясь на вышеупомянутых страницах?

index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/">

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-black-light sidebar-mini" >
    <app-root>Loading.....</app-root>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Не делайте этого в index.html, это плохая практика.

Вместо этого сделайте это в app.component, например: 

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

Где isOnLoginPage - это функция, определенная в файле ts, которая каким-то образом определяет (например, по URL), находится ли пользователь на странице входа или нет.

0 голосов
/ 04 мая 2018

Вы можете использовать Renderer2 в Angular.

Вы можете добавить класс к телу , используя this.renderer.addClass(document.body, 'dashboard'); по вашему требованию component.

Панель инструментов: (я добавил Панель инструментов класс) 

    import { Renderer2, ElementRef, OnDestroy } from '@angular/core';


        export class dashboardComponent implements OnDestroy {

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

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

Логин: (я добавил Логин класс) 

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');
  } 
}

Вот рабочая демонстрация

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...