Angular2 NgStyle 中的两个函数

Question

我想在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>

Answer 1

ngStyle 不合并多个对象。

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

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

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>

Answer 2

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>

Answer 3

我应用了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>

Angular2 NgStyle 中的两个函数

Angular2 two functions in NgStyle

html

typescript

ng-style

angular