host-context not working in Angular

问题

The button background is red, when it should be green

i.e. the conditional styling controlled by :host-context is not activated?

Child component styles commander.scss

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

Child component template commander.html

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

Host component template front.html

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

Host component code front.ts

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

Much of this is based on https://blog.angular-university.io/angular-ngclass-ngstyle/ so it should work - the only real differences I can see is that I have separate files for the templates and styles and I am using Angular within Ionic.

Packages used

"@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",

Works in different environment

Here is the same code in stackblitz, and it is working fine, the button is green as it should be: https://stackblitz.com/edit/ionic-host-context

The only differences I can see is that stackblitz uses Angular 4.1.3 and Ionic 3.5.2? Although I am not sure how exactly they have set up the rest of their environment.

来源：https://stackoverflow.com/questions/47352249/host-context-not-working-in-angular