Angular2 NgStyleの2つの関数

Question

ngStyleに2つの関数を設定したいと思います。私は[ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);"を試しましたが、テンプレート解析エラーが出ます。

ngStyleで2つの関数を設定するにはどうすればよいですか？

page.component.ts

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

Answer 1

のようにそれを使用しています。

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> 

Answer 2

ngStyle

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は、複数のオブジェクトをマージしません。

このような関数が頻繁に呼び出されるため、ビュー内の関数の使用（イベントハンドラを除く）はお勧めできません。

この場合、メソッドが毎回新しいインスタンスを返すため、例外が発生します。

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