Question

我正在处理Angular 2中的LoginComponent，它应该“重新设置”html和body标记，因此我可以放入特定于登录页面的背景图像。

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

有没有办法覆盖组件中html, body的样式？或任何相关的元素。

我尝试过这样的事情：

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

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

Answer 1

您需要使用ViewEncapsulation更改组件为css提供服务的方式。默认情况下，它设置为Emulated，角度设置为

添加包含代理项ID的属性并预处理样式规则

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

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

Answer 2

你可以尝试

body {
  /* body styles here */
}

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

另一种方法是在主要组件中使用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';
  }
}

<强>更新

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

我不确定这是否正是您所寻找的，但这不会让您永久更改身体背景图像。

以下是我为类似的事情做的。如果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";
  }
}

出于您的目的，当您点击按钮时，您可以使用不同的功能（而不是构造函数），您应该好好去。

Answer 4

我使用它的方式是

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

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

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

Answer 5

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

Answer 6

我有与margin-top相同的问题，我修复的方式是

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

这对我来说非常合适。

Answer 7

我在装在路由器出口的组件中使用了这种方法：

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

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

Answer 8

很简单，试试这个?

//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 9

最好在根级别添加css文件并在angular-cli.json中配置它或在index.html中添加它。所以你可以编写你的重置和全局样式，而不必担心影子和其他概念。

Answer 10

作为附加更新，当使用 Angular：9.1.12 时，可以通过使用 src / styles.css 文件来向body标签添加样式。假设src / angular.json的项目的Architect对象的styles数组已设置为 src / styles.css 。

在配置诸如 src / styles.css 之类的全局样式表时，angular.json文件应类似于以下内容。角度文档中也包含更多详细信息：https://angular.io/guide/workspace-config#style-script-config

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

样式html，来自web组件的主体（Angular 2）

10 个答案: