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>

我必须一遍又一遍地重复使用这段代码＆＃34;风格＆＃34;是一个JSON对象的变量，我动态获取它具有应用程序＆＃34;的样式表。

我想在其他网页上写这么简单：

<dynamic-header [style]="style"></dynamic-header> 并有一个组件来设置这些（下面的组件）。

虽然在ionic2中这是不可能的，因为它会将<ion-header>包裹在<dynamic-header>中，因此无法正确呈现页面。

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

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

动态设置ionic2组件的Style属性

1 个答案: