Html 动态设置ionic2组件的样式属性

我正在努力实现的目标：

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

HTML:

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

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

---

从指令中，只能绑定单个样式

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

---

使用它，

。

？这就是想法。似乎不起作用。。。使用directivestyles更新的Q未被更改。。属性未设置：）对不起，从这里看不出来，为什么。

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