web-dev-qa-db-ja.com

Angular）でホストバインディングを使用してスタイル宣言を挿入する

@HostBindingデコレータを使用してコンポーネントにスタイル宣言をバッチ注入する方法を知っていますか？私が試しているのは：

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'Lime'
  } as CSSStyleDeclaration;
}

私の理解では、これは背景と色のスタイルをコンポーネントに注入する必要がありますが、そうではありません...

私はこのように個々のスタイル宣言を制御することができます：

@HostBinding('style.background') private background = 'red';

しかし、私はそれらすべてのためにそれをしたいです、助けてください：P

これは完全なコードです：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'Lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

および動作中のプランカー： https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb?p=preview

angularangular5angular2-hostbinding
5
Andrei Voicu

<div style="...">や sanitize スタイルなどの要素に追加するのと同じ値を渡す必要があります

  @HostBinding('style')
  get myStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle('background: red; display: block;');
  }

  constructor(private sanitizer:DomSanitizer) {}

作業デモ

9
Günter Zöchbauer

複数のcssスタイルを文字列として、またはキャメルケースの規則に従ってオブジェクトとして渡したい場合にカバーできるソリューションは次のとおりです。

親HTML

<app-button [style]="styleFromParent">Some button</app-button>

親コンポーネントにはstyleFromParentプロパティがあり、そのプロパティがある時点で変更された場合のシミュレーションがあります。

親コンポーネントTS

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-site-panel',
  templateUrl: './site-panel.component.html',
})
export class SitePanelComponent implements OnInit {
  constructor(private _detectChanges: ChangeDetectorRef) {}
  styleFromParent = { marginTop: '10px', marginLeft: '50px' };

  ngOnInit() {
    setTimeout(() => {
      this.styleFromParent = { marginTop: '20px', marginLeft: '1px' };

      this._detectChanges.detectChanges();
    }, 2000);
  }
}

子HTML

<ng-content></ng-content>

子コンポーネントTS

import { Component, OnInit, HostBinding, Input } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
})
export class ButtonComponent implements OnInit {
  @HostBinding('style') baseStyle: SafeStyle;

  @Input()
  set style(style: string | object) {
    let mappedStyles = style as string;

    if (typeof style === 'object') {
      mappedStyles = Object.entries(style).reduce((styleString, [propName, propValue]) => {
        propName = propName.replace(/([A-Z])/g, matches => `-${matches[0].toLowerCase()}`);
        return `${styleString}${propName}:${propValue};`;
      }, '');

      this.baseStyle = this.sanitizer.bypassSecurityTrustStyle(mappedStyles);
    } else if (typeof style === 'string') {
      this.baseStyle = this.sanitizer.bypassSecurityTrustStyle(mappedStyles);
    }
  }

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {}
}

上記では、baseStyleにHostBindingからstyleへのコンポーネントバインディングがあることがわかります。 style入力が渡されると、セッターはトリガーし、文字列またはオブジェクトが渡されたかどうかを確認し、文字列に解析してそのcssをサニタイズし、baseStyleに割り当てます。これにより、ホストスタイルが変更されます。

0
Mario Petrovic