Как установить стиль для «тела» компонента в угловых?

Question

Я нашел код , это страница входа.Я хочу добавить его в свое угловое приложение, но не могу установить стиль фона.Мой фон пуст.

Вот что я вставил в свое угловое приложение: 1. html-файл

<div class="login">
  <h1>Login</h1>
  <form method="post">
    <input type="text" name="u" placeholder="Username" required="required"/>
    <input type="password" name="p" placeholder="Password" required="required"/>
    <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
  </form>
</div>

Затем я поместил соответствующий CSS-файл в коде для моего файла .scss вмое угловое приложение.

Вы можете заглянуть внутрь кодового маркера для получения большего количества кода, я просто скопировал копию в мое угловое приложение, и вот мой файл .ts (для компонента):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Итак, мой вопрос: как установить стиль для "тела" углового компонента?(Я хочу использовать этот компонент как целую страницу)

Answer 1

Если в корневом каталоге вашего приложения есть таблица стилей styles.css или styles.scss, вы можете добавить туда стиль для тела, например:

body {
    background-color: black;
}

Это изменит цвет фонадля всего приложения, однако.Если вы хотите изменить только цвет фона компонента входа, добавьте стиль background-color в таблицу стилей login.component.scss .

Answer 2

Из Документация :

Вы можете использовать селектор псевдокласса :host для назначения стилей в элементе , в котором размещается компонент (какв отличие от нацеливания на элементы внутри шаблона компонента).

Итак, в вашем файле login.component.scss:

:host{
  background-color: cyan;
}

Если вы действительно хотите добавить CSS в тело вашего приложения,Вы можете сделать это в файле styles.css в корне вашего проекта.

Answer 3

В вашем css файле используйте: host

:host {
    background-color: red;
    display: block;
}

Answer 4

вы можете поместить CSS в соответствующий файл login.component.scss.