样式 html，来自 Web 组件的正文 (Angular 2)

Question

我正在 Angular 2 中开发一个 LoginComponent，它应该 "restyle" html 和 body 标签，所以我可以放入特定于登录页面的背景图片。

但是在我的 login.css 中为 html, body 添加样式似乎不起作用。

有没有办法从组件覆盖 html, body 上的样式？或者与此相关的任何元素。

我试过类似的东西：

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

从 Login 组件外部设置元素样式。但似乎没有任何效果。

Answer 1

您需要使用 ViewEncapsulation 更改组件服务 css 的方式。默认设置为 Emulated 并且 angular 将

add an attribute containing surrogate id and pre-process the style rules

要更改此行为 import ViewEncapsulation from 'angular2/core' 并在组件的元数据中使用它：

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

Answer 2

你可以试试

body {
  /* body styles here */
}

但是组件中的样式不应该应用到自身之外的元素。

另一种方法是在主组件中使用 body 作为选择器，并在正文中使用 host-binding 到 set/remove a CSS class 来制作 CSS 你添加到你的 index.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（使用对服务的一些绑定时，class 会添加到正文中。

如果你不想全局添加 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');

Answer 3

最好在根级别添加 css 文件并在 angular-cli.json 中配置它，或者在 index.html 中添加它。这样您就可以编写您的重置和全局样式，而无需担心阴影 dom 和其他概念。

Answer 4

我刚刚编辑了 styles.scss 文件，它对我有用。

Answer 5

我不确定这是否正是您要找的，但这不会让您永久更改 body background-image。

这是我为类似的事情做的。如果您只想影响此页面的 body 背景图片，这可能会奏效。（我没有对此进行全面测试，但它似乎适用于 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";
  }
}

为了您的目的，您可以在单击按钮时使用不同的函数（而不是构造函数），您应该可以开始了。

Answer 6

我对 margin-top 也有同样的问题，我的解决方法是

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

这对我来说非常有效。

Answer 7

我的使用方式是

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

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

这将为特定组件动态添加和删除正文样式。

Answer 8

我在我的组件中使用这种方法，加载到路由器插座中：

      ngOnInit() {
        // Change <body> styling
        document.body.classList.add('align-content-between');
      }

      ngOnDestroy() {
        // Change <body> styling
        document.body.classList.remove('align-content-between');
      }

Answer 9

很简单试试这个

//Add Style
document.body.style.overflow = 'hidden'

// Remove style
document.body.style.removeProperty('overflow')

//Remove style on destroy
ngOnDestroy(): void {
  document.body.style.removeProperty('overflow')
}

Answer 10

作为附加更新，当使用 Angular: 9.1.12 时，可以使用 src/styles.css file.This 假设 src/angular.json 项目的建筑师对象的样式数组已设置为 src/styles.css.

配置全局样式 sheet 时，angular.json 文件应类似于以下内容，例如：src/styles.css. angular 文档中还有更多详细信息：https://angular.io/guide/workspace-config#style-script-config

{ 
    "projects": { 
        "app": { 
            "architect": { 
                "styles": ["src/styles.css"] 
            } 
        } 
    } 
}

Answer 11

将你的样式放入 css class/ classes 并在你的组件中做这样的事情：

constructor() {
    document.body.classList.add("mainMapPageBody");
  }

ngOnDestroy(){
    document.body.classList.remove("mainMapPageBody");
}

这使您不必在构造函数/析构函数中编写大量添加和删除样式，从而像其他答案一样更容易调试。

样式 html，来自 Web 组件的正文 (Angular 2)

Style html,body from web component (Angular 2)

shadow-dom

angular