Css 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}%`
  }
 }

从'@angular/core'导入{组件，输入}
常数smMin='48em'
常量mdMin='64em'
常量lgMin='75em'
常量半沟宽='0.5rem'
@组成部分({
选择器：“fg col”，
模板：`
`
})
让TargetDevice='phone'|'tablet'|'desktop'
设柱尺寸=1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
导出类列{
@输入
columnSize:columnSize=1；
@输入
targetDevice:targetDevice='phone'；
获取mediaQuery（）{
常量mq={
电话：`@media-only屏幕和（最小宽度：${smMin}）`，
平板电脑：`@media only screen and（最小宽度：${mdMin}）`，
桌面：`@仅媒体屏幕和（最小宽度：${lgMin}）`
}
返回mq[this.targetDevice]；
}
获取flexBasis（）{
const baseWidth=100/总列数
const flexBasisNum=基本宽度*列大小
返回`${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
    }
  }

zone.js:516未处理的承诺拒绝：模板解析错误：
分析器错误：缺少预期值：在中的第18列[{
mediaQuery{
“框大小”：“边框框”，
flex:“0 0自动”，
“右填充”：“0.5rem”，
“左填充”：“0.5rem”，
“弹性基础”：弹性基础，
“最大宽度”：flexBasis
}
}]在Column@0：5（“][ngStyle]”{
mediaQuery{
“框大小”：“边框框”，
"): Column@0:5
分析器错误：中第207列出现意外标记}[{
mediaQuery{
“框大小”：“边框框”，
flex:“0 0自动”，
“右填充”：“0.5rem”，
“左填充”：“0.5rem”，
“弹性基础”：弹性基础，
“最大宽度”：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 */ }

您可以使用
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 */ }

那么…会发生什么？另外，你知道
|
做什么吗？它们是赋值，而不是打字。@jonrsharpe我想为我的属性创建一个基于字符串的枚举。我添加了一个错误，这是mediaquerySo的模板解析问题…会发生什么？另外，你知道
做什么吗？它们是赋值，不是打字。@jonrsharpe我想为我的属性创建一个基于字符串的枚举。我已经添加了一个错误，这是mediaqueryI的模板解析问题。我希望像使用“对不起，不知道”那样使用aphrodite或glamor作为内联样式。我希望像使用“对不起，不知道”那样使用aphrodite或glamor作为内联样式帽子