Html NgStyle中的Angular2两个函数

我想在ngStyle中设置两个函数。我尝试过

[ngStyle]=“setAlignmentStyle（element.alignment）；setShapeStyle（element.shape）；”

但它会导致模板解析错误

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

page.component.ts

导出类页面组件{
// ...
setAlignmentStyle（对齐）{
让样式={
“边距”：对齐===“中心”？“0自动”：”，
“浮动”：对齐方式==”右“？”右“：（对齐方式==”左“？”左“：”），
};
返回样式；
}
设置形状样式（形状）{
让样式={
“边界半径”：形状==‘圆’？‘50%’：“”，
};
返回样式；
}
}

page.component.html

{{element.text}

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>

{{element.text}

设置样式（对齐、形状：字符串）{
让样式={}；
开关（校准）{
案例“中心”：
style.margin='0 auto'；
打破
案例“正确”：
style.float='right'；
打破
案例“左”：
style.float='left'；
打破
}
开关（形状）{
案例“循环”：
样式['border-radius']=“50%”；
打破
}
返回样式；
}
//HTML
{{element.text}

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

导出类页面组件{
// ...
setAlignmentStyle（路线、样式）{
styles=styles |{}；
styles.margin=对齐==='center'？'0 auto'：''；
style.float=alignment==‘右’？‘右’：（alignment==‘左’？‘左’：“”）；
返回样式；
}
设置形状样式（形状、样式）{
styles=styles |{}；
样式['border-radius']=形状=='circle'？'50%'：''；
返回样式；
}
}

{{element.text}

预期的行为是什么？您不能返回两个对象并期望

ngStyle

同时应用它们，这是行不通的。你必须自己将它们组合到一个对象中。我需要

setAlignmentStyle（alignment）

和

setShapeStyle（shape）

一起提供一个合并的样式，例如。g、 ，

[ngStyle]=“setAlignmentStyle（'center'）；setShapeStyle（'circle'）；”

将给出

边距：0自动；边界半径：50%

这不起作用。您需要调用一个函数，该函数返回一个具有两个属性的对象。我建议根本不要调用函数，只将对象分配给组件中的属性并绑定到该属性。

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>