ionic2組件設置樣式屬性動態

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> 

我不得不重用這個代碼，一遍又一遍。
「style」是一個JSON對象的變量，我動態獲取具有「應用程序的樣式表」。

我LIGE把它寫像這樣簡單，對其他網頁：

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