使用@ Angular / flex-layout响应功能导致模板解析错误

Question

使用flex-layout 2.0.0-rc.1

扫描堆栈我还没有找到任何相关信息。 （rc.1很新）

我正在关注@ {Angular / flex-layout documentation，并希望使用响应功能部分。我想在各种媒体查询断点处为元素提供条件类。

以下是我的代码的简化示例。

<div class="box" [ngClass]=" {'remove-margin-top': false}"
                 [ngClass.sm]=" {'remove-margin-top': true}">

    <div class="child"></div>
</div>

当上面的代码只包含[ngClass]=" {'remove-margin-top': false}"时，一切都很顺利。没有模板解析错误。

当在模板解析中添加[ngClass.sm]=" {'remove-margin-top': true}"时会出现问题...

  

模板解析错误：   无法绑定到＆＃39; ngClass.sm＆＃39;因为它不是＆lt; div;＆＃39;

的已知属性

我已经能够确认FlexLayoutModule是否正确导入到模块中，而其他特定于flex-layout的指令也能正常工作。

主要模块导入

import { FlexLayoutModule } from '@angular/flex-layout';
import { CommonModule } from '@angular/common';
...

@NgModule({
imports: [
  CommonModule,
  MomentModule,
  FlexLayoutModule
],

Package.json的一部分

"dependencies": {
"@angular/common": "4.0.0-rc.1",
"@angular/compiler": "4.0.0-rc.1",
"@angular/core": "4.0.0-rc.1",
"@angular/forms": "4.0.0-rc.1",
"@angular/http": "4.0.0-rc.1",
"@angular/material": "2.0.0-beta.2",
"@angular/flex-layout": "2.0.0-rc.1",
"@angular/platform-browser": "4.0.0-rc.1",
"@angular/platform-browser-dynamic": "4.0.0-rc.1",
"@angular/router": "4.0.0-rc.1",
"angular2-moment": "1.1.0",
...
}
"devDependencies": {
"@angular/cli": "1.0.0-rc.0",
"@angular/compiler-cli": "4.0.0-rc.1",
"@types/core-js": "0.9.35",
"@types/hammerjs": "2.0.34",
"@types/jasmine": "2.5.35",
"@types/node": "6.0.60",
"@types/socket.io-client": "1.4.27",
"@types/source-map": "0.1.27",
"@types/stompjs": "2.3.0",
"@types/webpack": "1.12.34",
"@types/webrtc": "0.0.21",
...
}