主机上下文在Angular

Question

按钮背景为红色，应为绿色

即。由：host-context控制的条件样式未激活？

子组件样式commander.scss

commander {
  button {
    background-color: red;
  }
  :host-context(.enough-space) .btn-theme {
    background-color: green;
  }
}

子组件模板commander.html

<button class="btn-theme" (click)="demand()">{{requestText}}</button>

主机组件模板front.html

...
<commander (command)="requestPage()" [requestText]="requestText"></commander>

主机组件代码front.ts

@Component({
             selector: "page-front",
             templateUrl: "front.html",
             host: {'class': 'enough-space'}
           })
export class FrontPage {
...
}

这很大程度上基于https://blog.angular-university.io/angular-ngclass-ngstyle/所以它应该有效 - 我能看到的唯一真正的差异是我有模板和样式的单独文件，我在离子中使用Angular。

使用的包

"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"ionic-angular": "3.9.0",

适用于不同的环境

这是stackblitz中的相同代码，它工作正常，按钮是绿色的应该是：https://stackblitz.com/edit/ionic-host-context

我能看到的唯一区别是stackblitz使用Angular 4.1.3和Ionic 3.5.2？虽然我不确定他们是如何确定其他环境的。