动态设置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对象的一个变量，我动态获取它，它有"应用程序的样式表"。

我愿意在其他页面上写得这么简单：

<dynamic-header [style]="style"></dynamic-header>并有一个组件来设置这些(组件附加在下面)。

尽管这在ionic2中是不可能的，因为它会将<ion-header>封装在<dynamic-header>中，因此无法正确呈现页面。

所以我想知道是否有一种替代方案可以将其作为一个组件，也许还有一种将其作为指令的方法，我只是找不到关于@Directive的必要信息。。

还尝试了绑定<ion-content dynamic-content [style]="style">...</>的@指令
AND
[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;
}
}
}