Блог

Главная - Вопросы по программированию - Условное изменение цвета основного текста в angular

Условное изменение цвета основного текста в angular

#html #css #angular #angular8

#HTML #css #angular #angular8

Вопрос:

Я работаю над приложением angular. Я хочу изменить цвет фона тела условно, когда мой флаг имеет значение true. В моем css у меня есть следующее

 body {
 backgraound-color: blue;
 }

Теперь этот цвет применяется ко всему тексту страницы. Но когда мой флаг имеет значение true, я хочу изменить цвет фона страницы. Обычно, когда мне нужно условно изменить цвет фона, я использую [ngClass], но в этом случае я не понимаю, как я могу применить [ngClass] к основному тексту. Как я могу изменить цвет фона тела условно?

Ответ №1:

Для этого вам следует использовать ngClass. Это довольно просто. В вашем app.component.html файл перенесите все элементы DOM в элемент div и добавьте туда условно CSS.

app.component.html*

 <div [ngClass] ="{'bodyClass1':flag ,'bodyClass2':!flag}" >
.
.
.
</div>

app.component.css

 .bodyClass1{
  background: skyblue;
}
.bodyClass2{
  background: red;
}

app.component.ts

 import ...
..
..
.
flag: boolean = true;

Ответ №2:

 constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit(){
   this.document.body.classList.add('className');
}

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

     constructor(private store: Store, private render: Renderer2) {
    this.render.addClass(document.body,'className')
  }

Ответ №3:

Вы можете использовать [ngStyle], как показано ниже

  • В вашем HTML =>

     <body [ngStyle]="{'background-color': color ? 'red' : 'green' }"> your body content</body>

  • В вашем component.ts
    определить переменную

    color =false; (используя функцию, измените значение этой переменной по своему усмотрению)

Или еще, если вы используете [ngClass]

  <body [ngClass]=" color ? 'yourcssClass1' : 'yourcssClass2' "> your body content</body>

Комментарии:

1. У меня нет тега body в моем html. когда мы определяем body в css, он автоматически применяется ко всему тексту этой страницы.

2. да, удалите его и используйте пользовательские два класса, такие как yourcsclass1 { background-color: blue; } yourcssClass2 { background-color: red; } и используйте этот класс, как указано выше, в вашем html-элементе или используйте [ngStyle], как указано выше. Вы можете использовать как [ngClass], так и [ngStyle] в любом HTML-элементе

3. Если вы не поняли, проверьте этот пример stackblitz.com/edit/angular-b3nv1a

Ответ №4:

HTML:

 <div [ngClass] ="{'class1':flag ,'class2':!flag}" >
.
.
.
</div>

SCSS:

 .class1 {
    body {
     background-color: blue;
    }
}

.class2 {
   body {
    background-color: orange;
   }
}

Компонент:

 .
.
.
.
flag: boolean = false;