Изменение css тела из углового компонента - PullRequest
Новая
       0

Изменение css тела из углового компонента

0 голосов
/ 11 сентября 2018

Angular4

Привет всем. У меня есть одна страница в большом приложении Angular4, которая должна иметь body css, отличную от остальной части приложения.

Я не хочу устанавливать ViewEncapsulation.None, потому что это только один компонент, который должен быть затронут.

Можно ли каким-либо образом использовать: host (),: host-context () или :: ng-deep, чтобы выбрать тело и применить правила css? Если так, то как, пожалуйста? Если нет, есть ли другой способ добиться этого?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Большое спасибо вам обоим. @ Palpatine1991, вы спросили, почему я хочу получить доступ к элементу <body> DOM. Это потому, что у меня есть одна страница в приложении, которая представляет собой полноэкранную игру, в которую играют на мобильных устройствах и в которой есть функция перетаскивания. На iOS эффект отскока, присутствующий в Safari, делает перетаскивание очень плохим. Поэтому я хотел добавить следующий css к элементу body и html DOM этой единственной страницы, что подавляет эффект отскока .:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

Я посмотрел на решения, которые вы дали (спасибо!), И выбрал следующее решение: 

  ngOnInit() {
    this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
    this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
  }

  ngOnDestroy() {
    this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
    this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
  }

Кажется, это работает.

Спасибо:)

0 голосов
/ 11 сентября 2018

Зачем вам нужно добавлять свой CSS в <body>, если он влияет только на один компонент?

  • Используя :host(), он будет применять стили к элементу, выбранному селектором компонента.
  • Используя ::ng-deep, вы можете выбрать только те элементы, которые находятся где-то под элементом хоста (но <body> не находится под вашим хостом!)

Единственный способ изменитьстили тела из компонента, который имеет ViewEncapsulation.Emulated, использует API Renderer2, но мне кажется, что это очень плохая практика

Если вам нужно переопределить некоторые глобальные стили <body> вашего компонента,Вы можете сделать это, используя :host-context.Пример здесь: https://stackblitz.com/edit/angular-material2-issue-oodjmm

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

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

...