css - ngStyle内插

构建在ngStyle中使用的列组件时，需要在grid中使用媒体查询。这是我到目前为止所拥有的：

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

最佳答案

您可以使用window.matchMedia()设置字段

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
}

然后参考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