ngStyle 내 보간

grid 내에서 사용할 열 구성 요소를 작성할 때 ngStyle 인 미디어 쿼리를 사용해야합니다.ngStyle 내 보간

는

import { Component, Input } from '@angular/core' 

const smMin = '48em' 
const mdMin = '64em' 
const lgMin = '75em' 

const halfGutterWidth = '0.5rem' 

@Component({ 
    selector: 'fg-col', 
    template: `<div [ngStyle]="{ 
    mediaQuery { 
     box-sizing: border-box; 
     flex: 0 0 auto; 
     padding-right: 0.5rem; 
     padding-left: 0.5rem; 
     flex-basis: flexBasis, 
     max-width: flexBasis 
    } 
    }"> 
    <ng-content></ng-content> 
    </div>` 
}) 

let TargetDevice = 'phone' | 'tablet' | 'desktop' 
let ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 

export class Column { 
    @Input 
    columnSize: ColumnSize = 1; 

    @Input 
    targetDevice: TargetDevice = 'phone'; 

    get mediaQuery() { 
    const mq = { 
     phone: `@media only screen and (min-width: ${smMin})`, 
     tablet: `@media only screen and (min-width: ${mdMin})`, 
     desktop: `@media only screen and (min-width: ${lgMin})` 
    } 
    return mq[this.targetDevice]; 
    } 

    get flexBasis() { 
    const baseWidth = 100/TOTAL_COLUMNS 
    const flexBasisNum = baseWidth * columnSize 
    return `${flexBasisNum}%` 
    } 
}

브라우저 콘솔의 오류는 다음과 같습니다 : 이것은 내가 지금까지 무엇을 가지고

zone.js:516 Unhandled Promise rejection: Template parse errors: 
Parser Error: Missing expected : at column 18 in [{ 
    mediaQuery { 
     'box-sizing': 'border-box', 
     flex: '0 0 auto', 
     'padding-right': '0.5rem', 
     'padding-left': '0.5rem', 
     'flex-basis': flexBasis, 
     'max-width': flexBasis 
    } 
    }] in [email protected]:5 ("<div [ERROR ->][ngStyle]="{ 
    mediaQuery { 
     'box-sizing': 'border-box', 
"): [email protected]:5 
Parser Error: Unexpected token } at column 207 in [{ 
    mediaQuery { 
     'box-sizing': 'border-box', 
     flex: '0 0 auto', 
     'padding-right': '0.5rem', 
     'padding-left': '0.5rem', 
     'flex-basis': flexBasis, 
     'max-width': flexBasis 
    } 
    }

출처

2017-02-27 vamsiampolu

보기 그래서? 또한,'|'무엇을하는지 알고 있습니까? 그것들은 과제가 아니라 입력입니다. – jonrsharpe

@jonrsharpe 내 속성에 대한 문자열 기반 열거 형을 만들고 싶습니다. mediaquery와 관련된 템플릿 구문 분석 오류 인 오류가 발생했습니다 – vamsiampolu

당신은 참조 다음 필드를

constructor() { 
    var mql = window.matchMedia("(orientation: portrait)"); 
    mql.addListener(this.handleOrientationChange.bind(this)); 
    this.handleOrientationChange(mql); 
} 

isPortrait:bool = false; 
handleOrientationChange(mql) { 
    this.isPortrait = mql.matches 
}

을 설정하고 window.matchMedia()을 사용할 수 있습니다 플랫에 ngStyle

<div [ngStyle]="isPortrait ? { /* portrait styles here */ } : { /* landscape styles here */ }

무슨 일이 ... 또한

출처

2017-02-28 07:03:52

[여기] (https://github.com/vamsiampolu/flexboxgrid/)와 같이 아프로디테 또는 글래머를 사용하고 싶습니다. – vamsiampolu

죄송합니다. , 그것에 대해 모른다. –

ngStyle 내 보간

답변

관련 문제