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

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