Angular2 NgStyle中的两个函数答案

【问题标题】：Angular2 two functions in NgStyleAngular2 NgStyle中的两个函数
【发布时间】：2016-11-18 18:31:33
【问题描述】：

我想在 ngStyle 中设置两个函数。我试过[ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);"，但它给出了模板解析错误。

在ngStyle中应该如何设置两个函数？

page.component.ts

export class PageComponent {

    // ...

    setAlignmentStyle(alignment) {
        let styles = {
            'margin': alignment === 'center' ? '0 auto' : '',
            'float': alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : ''),
        };
        return styles;
    }

    setShapeStyle(shape) {
        let styles = {
            'border-radius': shape === 'circle' ? '50%' : '',
        };
        return styles;
    }
}

page.component.html

<div [ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);">{{element.text}}</div>

【问题讨论】：

预期的行为是什么？您不能返回两个对象并期望 ngStyle 将它们都应用，这是行不通的。您必须自己将它们组合成一个对象。
我需要 setAlignmentStyle(alignment) 和 setShapeStyle(shape) 一起提供一种合并样式，例如。 g.，[ngStyle]="setAlignmentStyle('center');setShapeStyle('circle');" 将给 margin: 0 auto; border-radius: 50%
那行不通。您需要调用一个函数，该函数返回一个具有两者属性的对象。我建议根本不调用函数，只需将对象分配给组件中的属性并绑定到该属性。

标签： html angular typescript ng-style

【解决方案1】：

我应用了Decorator设计原则（不是严格的Decorator）。

export class PageComponent {

    // ...

    setAlignmentStyle(alignment, styles) {
        styles = styles || {};

        styles.margin = alignment === 'center' ? '0 auto' : '';
        styles.float = alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : '');

        return styles;
    }

    setShapeStyle(shape, styles) {
        styles = styles || {};

        styles['border-radius'] = shape === 'circle' ? '50%' : '';
        return styles;
    }
}

<div [ngStyle]="setAlignmentStyle(element.alignment, setShapeStyle(element.shape))">{{element.text}}</div>

【讨论】：

【解决方案2】：

ngStyle 不会合并多个对象。

无论如何都不鼓励在视图中使用函数（事件处理程序除外），因为此类函数被频繁调用。

在您的情况下，这将导致异常，因为方法返回一个新实例，每次都返回。

export class PageComponent {
    styles = {}

    ngOnInit() {
      this.setAlingmentStyle('xxx');
      this.setShapeStyle('yyy');
    }

    // ...

    setAlignmentStyle(alignment) {
        this.styles.margin = alignment === 'center' ? '0 auto' : '';
        this.styles.float = alignment === 'right' ? 'right' : (alignment === 'left' ? 'left' : ''),
        };
    }

    setShapeStyle(shape) {
        this.styles[
            'border-radius'] = shape === 'circle' ? '50%' : '',
    }
}

然后像这样使用它

<div [ngStyle]="styles">{{element.text}}</div>

【讨论】：

【解决方案3】：

setStyles(alignment, shape: string) {
    let styles = {};
    switch(alignment){
      case 'center' : 
        styles.margin = '0 auto';
        break;
      case 'right' : 
        styles.float = 'right';
        break;
      case 'left' : 
        styles.float = 'left';
        break;
    }
    switch(shape){
      case 'circle' : 
        styles['border-radius'] = '50%';
        break;
    }

    return styles;
}

// HTML

<div [ngStyle]="setStyles(element.alignment, element.shape);">{{element.text}}</div>

【讨论】：