发表新帖
发表新帖

Style html,body from web component (Angular 2)

前端 未结
关注
10 1764
南笙
南笙 2020-12-03 00:39

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 speci

相关标签:
10条回答
  • 情话喂你
    2020-12-03 00:57

    Better to add css file at root level and configure it in angular-cli.json OR add it in index.html . so you can write your reset and global styles and no need to worry about shadow dom and other concepts.

    0 讨论(0)
  • 眼角桃花
    2020-12-03 00:59

    The way I used it is

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

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

    This will dynamically add and remove style from the body for a particular component.

    0 讨论(0)
  • 猫巷女王i
    2020-12-03 01:05

    You need to change the way your component serves css using ViewEncapsulation. By default it's set to Emulated and angular will

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

    To change this behavior import ViewEncapsulation from 'angular2/core' and use it in component's metadata:

    @Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})
    0 讨论(0)
  • 失恋的感觉
    2020-12-03 01:07

    I'm not sure if this is exactly what you're looking for but this won't leave you with a permanently changed body background-image.

    Here is how I did it for something similar. If tou want to impact the body background image for just this page this may work. (I've not tested this fully but it seems to work on windows browsers.)

    Inside your component you can just work directly through the DOM when the component gets constructed. When it gets destroyed you can undo the change.

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

    For your purposes you can use a different function (rather than the constructor) when you button is clicked and you should good to go.

    0 讨论(0)
  • 后悔当初
    2020-12-03 01:10

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

    update

    DomAdapter is gone. Renderer2 should provide similar functionality.

    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');

    0 讨论(0)
  • 臣服心动
    2020-12-03 01:12

    Very simple try this

    0 讨论(0)
 看不清?
提交回复
热议问题