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

Я применил принцип конструкции декоратор (это не является строгим декоратор).

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