動態設置ionic2組件的Style屬性

Question

我正在努力實現的目標：

<ion-header [style.background-color]="(style|async)?.logoBackground">
    <ion-navbar >
        <button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title [style.background-color]="(style|async)?.logoBackground">
            <dynamic-logo [style]="style"></dynamic-logo>
        </ion-title>
    </ion-navbar>
</ion-header>

我必須一遍又一遍地重用這段代碼。
“樣式”是 JSON 對象的變量，我動態獲取其中具有“應用程序樣式表”。

我很想在其他頁面上寫得像這樣簡單：

<dynamic-header [style]="style"></dynamic-header>並有一個組件來設置這些（組件附加在下面）。

盡管這在 ionic2 中是不可能的，因為它會將<ion-header>包裝在<dynamic-header> ，因此無法正確呈現頁面。

所以我想知道是否有其他方法可以將其作為組件，也許是一種將其作為指令的方法，我只是無法找到有關 @Directive 的必要信息。

還嘗試了 @Directive 綁定<ion-content dynamic-content [style]="style">...</>
和
[style]="(style|async)"給出WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

TS：

import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { PageStyle } from "../../providers/company-service";

@Component({
  selector: 'dynamic-header',
  templateUrl: 'dynamic-header.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class DynamicHeaderComponent {
  @Input() style: PageStyle;
}

HTML：

<ion-header [style.background-color]="(style|async)?.logoBackground">
    <ion-navbar >
        <button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title [style.background-color]="(style|async)?.logoBackground">
            <dynamic-logo [style]="style"></dynamic-logo>
        </ion-title>
    </ion-navbar>
</ion-header>

改革為指令

import { Directive, HostBinding, Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { PageStyle } from "../../providers/company-service";

@Directive({
  selector: 'dynamic-content',
  /*  templateUrl: 'dynamic-content.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
      encapsulation: ViewEncapsulation.None,
  */
})
export class DynamicContentComponent {
  @Input() style: PageStyle;

  @HostBinding('style.background-image')
  get getBackgroundImage() {
    if (this.style) {
      return this.style.backgroundImage;
    }
  }

  @HostBinding('style.background-repeat')
  get getBackgroundRepeat() {
    if (this.style) {
      return "no-repeat";
    }
  }

  @HostBinding('style.background-size')
  get getBackgroundSize() {
    if (this.style) {
      return "cover";
    }
  }

  @HostBinding('style.color')
  get getTextColor() {
    if (this.style) {
      return this.style.textColor;
    }
  }
}

Answer 1

從指令中，您只能綁定單個樣式

export class DynamicHeaderComponent {
  @Input() style: PageStyle;

  // repeat this getter for every style property
  @HostBinding('style.background-color')
  get backgroundColor() {
    if(this.style) {
      return this.style.backgroundColor;
    }
  }
}