Стиль html, тело из веб-компонента (Angular 2)

Я работаю над LoginComponent в Angular 2, который должен "восстанавливать" теги html и body, поэтому я могу разместить фоновое изображение для страницы входа.

Но просто добавление стиля для html, body в моем login.css не работает.

Есть ли способ переопределить стиль на html, body от компонента? Или любой элемент в этом отношении.

Я пробовал такие вещи, как:

:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }

чтобы стилизовать элемент извне компонента Login. Но ничего не работает.

Ответы

Ответ 1

Вы можете попробовать

body {
  /* body styles here */
}

но стили в компонентах не должны применяться к элементам вне себя.

Другой способ - использовать body как селектор в вашем основном компоненте и использовать привязку хоста для установки/удаления класса CSS в теле, чтобы сделать CSS, добавленный в ваш match.html.

@Component({
  selector: "body", 
  host: {
    "[class.some-class]":"someClass" 
  }, 
}) 
export class AppComponent {
  constructor(private loginService: LoginService) {
    loginService.isLoggedInChanged.subscribe((value) => {
      this.someClass = value;
    });
  }
  someClass: bool = false;
}

когда вы установите для параметра someclass значение true (например, привязка к службе, класс добавляется в тело).

Если вы не хотите добавлять CSS во всем мире, вы также можете напрямую привязать атрибут стиля

@Component({
  selector: "body", 
  host: {
    "[style.background-image]":"bodyBackgroundImage()" 
  }, 
}) 
export class AppComponent {
  bool isLoggedIn = false;
  constructor(private loginService: LoginService) {
    loginService.isLoggedInChanged.subscribe((value) => {
      this.isLoggedIn = value;
    });
  }
  function bodyBackgroundImage() {
    return this.isLoggedIn ? 'url("gradient_bg.png")': 'none';
  }
}

Обновление

DomAdapter исчез. Renderer2 должен обеспечивать аналогичную функциональность.

Способ стиля <body> непосредственно из компонента входа состоит в использовании DomAdapter (см. также https://github.com/angular/angular/issues/4942)

System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
  browser_adapter.BrowserDomAdapter.makeCurrent();
})
...
_dom: DomAdapter = new BrowserDomAdapter();
_dom.setStyle(_dom.query('body'), 'padding', '50px');

Забастовкa >

Ответ 2

Вам нужно изменить способ использования вашего компонента css с помощью ViewEncapsulation. По умолчанию установлено значение Emulated и angular будет

добавить атрибут, содержащий суррогатный идентификатор и предварительно обработать правила стиля

Чтобы изменить это поведение import ViewEncapsulation from 'angular2/core' и использовать его в метаданных компонента:

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})

Ответ 3

Я не уверен, что это именно то, что вы ищете, но это не оставит вас с постоянно измененным фоном.

Вот как я сделал это для чего-то подобного. Если tou хочет воздействовать на фоновое изображение тела только для этой страницы, это может сработать. (Я не тестировал это полностью, но, похоже, работает в браузерах Windows.)

Внутри вашего компонента вы можете просто работать непосредственно через DOM при создании компонента. Когда он будет уничтожен, вы можете отменить изменение.

export class SpecialBackground  {
  constructor(){
    document.body.style.backgroundImage = "url('path/to/your/image.jpg')";
    document.body.style.backgroundPosition = "center center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
    document.body.style.backgroundSize = "cover";
  }
  ngOnDestroy(){
    document.body.style.backgroundImage = "none";
  }
}

Для ваших целей вы можете использовать другую функцию (а не конструктор), когда вы нажимаете кнопку, и вы должны хорошо идти.

Ответ 4

Я только что редактировал файл styles.scss, и это сработало для меня.

Ответ 5

У меня была такая же проблема с margin-top, что я исправил

constructor(
    private _renderer: Renderer2,
) {
    this._renderer.removeStyle(document.body, 'margin-top');
}

Это отлично сработало для меня.

Ответ 6

То, как я его использовал,

constructor() {
    document.body.className = "bg-gradient";
  }

ngOnDestroy(){
    document.body.className="";
  }

Это будет динамически добавлять и удалять стиль из тела для определенного компонента.

Ответ 7

Лучше добавить файл css на корневом уровне и настроить его в angular -cli.json или добавить его в index.html. поэтому вы можете написать свои reset и глобальные стили и не беспокоиться о теневом dom и других концепциях.