样式html,从Web组件(角度2)

概述我正在使用角色2中的一个LoginComponent，它应该“清理”html和body标签，所以我可以放入特定于登录页面的背景图片。 但是只要添加一个html的样式，我的login.css中的body就好像不起作用了。 有没有办法从组件覆盖html，body的风格？或任何元素的事情。 我试过的东西就像： :host(.btn) { ... }:host(.btn:host) { ... }.b 我正在使用角色2中的一个LoginComponent，它应该“清理”HTML和body标签，所以我可以放入特定于登录页面的背景图片。

但是只要添加一个HTML的样式，我的login.CSS中的body就好像不起作用了。

有没有办法从组件覆盖HTML，body的风格？或任何元素的事情。

我试过的东西就像：

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

从Login组件外部创建一个元素。但似乎没有任何工作。

解决方法 你可以试试

body {  /* body styles here */}

但组件中的样式不应该应用于外部元素。

另一种方法是在主要组件中使用body作为选择器，并使用host-binding来设置/删除body上的CSS类，使您添加到index.HTML匹配中的CSS。

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

一种风格的方式< 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');

总结

以上是内存溢出为你收集整理的样式html,从Web组件(角度2)全部内容，希望文章能够帮你解决样式html,从Web组件(角度2)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。