ngStyle内の補間

Question

gridで使用する列コンポーネントを作成するときに、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 Column@0:5 ("<div [ERROR ->][ngStyle]="{ 
    mediaQuery { 
     'box-sizing': 'border-box', 
"): Column@0: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 
    } 
    } 

Answer 1

あなたは

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 */ } 

は

• https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries