web-dev-qa-db-ja.com

スタイルHTML、Webコンポーネントのボディ（Angular 2）

LoginComponentとhtmlタグを「リスタイル」する必要があるAngular 2のbodyに取り組んでいるので、特定の背景画像をログインページ。

ただし、html, bodyのスタイルをlogin.cssに追加するだけでは機能しないようです。

コンポーネントのhtml, bodyのスタイルをオーバーライドする方法はありますか？またはその問題の任意の要素。

私は次のようなことを試しました：

:Host(.btn) { ... }
:Host(.btn:Host) { ... }
.btn:Host { ... }

Loginコンポーネントの外部から要素をスタイルします。しかし、何もうまくいかないようです。

angularshadow-dom
40
Vivendi

試すことができます

body {
  /* body styles here */
}

ただし、コンポーネントのスタイルは、それ自体の外部の要素に適用されることは想定されていません。

別の方法は、メインコンポーネントでセレクタとしてbodyを使用し、ホストバインディングを使用して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';
  }
}

update

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');
20
Günter Zöchbauer

ViewEncapsulation を使用して、コンポーネントがcssを提供する方法を変更する必要があります。デフォルトでは、Emulatedに設定され、angularは

サロゲートIDを含む属性を追加し、スタイルルールを前処理します

この動作import ViewEncapsulation from 'angular2/core'を変更し、コンポーネントのメタデータで使用するには：

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

これがまさにあなたが探しているものであるかどうかはわかりませんが、これはあなたに永続的に変更されたボディの背景画像を残しません。

似たようなもののために私がそれをした方法は次のとおりです。 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";
  }
}

あなたの目的のために、ボタンがクリックされたときに、コンストラクタではなく別の関数を使用できます。

16
jfgrissom

私がそれを使用した方法は

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

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

これにより、特定のコンポーネントのスタイルが動的にボディに追加および削除されます。

12
Akash Bavale

Styles.scssファイルを編集したところ、うまくいきました。

7
Omer

ルーターアウトレットに読み込まれたコンポーネントでこのアプローチを使用します。

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

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

Margin-topで同じ問題がありましたが、修正方法は

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

これは私にとって完璧に機能しました。

1
Vamshi

ルートレベルでcssファイルを追加し、angular-cli.jsonで構成することをお勧めしますOR index.htmlで追加します。リセットスタイルとグローバルスタイルを記述することができ、シャドウdomやその他の概念を心配する必要はありません。

0
Chaitanya Chauhan