样式的HTML，身体Web组件（角2）

本文介绍了样式的HTML，身体Web组件（角2）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在角2个工作在 LoginComponent 应该restyle的 HTML 和体标签，这样我就可以把特定登录页面的背景图像。

但只是增加了风格 HTML，身体在我的 login.css 似乎不工作

有没有办法从一个组件覆盖上的 HTML，身体的风格？或与此有关的任何元素。

我试着喜欢的东西：

 ：主机（.btn）{...}
：主机（.btn：主机）{...}
.btn：主机{...}

从登录组件外风格的元素。但似乎没有任何工作。

解决方案

您可以尝试

  {体
  / *车身造型在这里* /
}

但在组件样式不应该被应用到自己以外的元素。

另一种方法是使用体如选择在你的主要成分，使用主机绑定设置/取消对身体CSS类让你添加到您的索引CSS html的比赛。

  @Component（{
  选择：身体，
  主持人：{
    [class.some级]：SomeClass的
  }，
}）
出口类AppComponent {
  构造函数（私人login服务：login服务）{
    loginService.isLoggedInChanged.subscribe（（值）=＆GT; {
      this.someClass =价值;
    }）;
  }
  SomeClass的：布尔= FALSE;
}

当您设置 SomeClass的为真（usind一些绑定到一个服务类被添加到全身。

如果你不希望添加CSS全球范围内还可以绑定到样式属性直接

  @Component（{
  选择：身体，
  主持人：{
    [style.background形象]：bodyBackgroundImage（）
  }，
}）
出口类AppComponent {
  布尔isLoggedIn = FALSE;
  构造函数（私人login服务：login服务）{
    loginService.isLoggedInChanged.subscribe（（值）=＆GT; {
      this.isLoggedIn =价值;
    }）;
  }
  功能bodyBackgroundImage（）{
    返回this.isLoggedIn？ URL（gradient_bg.png）'：'无';
  }
}

一个办法风格＆LT;身体GT; 直接从登录组件使用 DomAdapter （另见）

<$p$p><$c$c>System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent（）;
}）
...
_dom：DomAdapter =新BrowserDomAdapter（）;
_dom.setStyle（_dom.query（身体），填充，50像素'）;

I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page.

But just adding a style for the html, body in my login.css doesn't seem to work.

Is there a way to override the style on the html, body from a component? Or any element for that matter.

I've tried things like:

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

to style an element from outside the Login component. But nothing seems to work.

解决方案

You could try

body {
  /* body styles here */
}

but styles in components are not supposed to be applied to elements outside themselves.

Another way is to use body as selector in your main component and use host-binding to set/remove a CSS class on body to make CSS you added to your index.html match.

@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;
}

when you set someclass to true (usind some binding to a service, the class gets added to the body.

If you don't want to add CSS globally you can also bind to a style attribute directly

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

A way to style <body> directly from the login component is to use the DomAdapter (see also 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');

这篇关于样式的HTML，身体Web组件（角2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！