如何在 Angular 2 中动态更改 :host 中的 CSS？

如何动态更改组件宿主的 CSS 属性？

我有一个组件，在它的 CSS 中我给了它一个样式：

:host {
  overflow-x: hidden
}

在子组件中单击按钮时，我需要添加overflow-y: hidden到主机组件。

我如何实现这种行为？

这是一个工作示例。 https://plnkr.co/edit/VF2WP2daF86wwbmdS5I3?p=preview

使用以下主机绑定：

@HostBinding('style.overflow-y') overflowY = 'scroll';

这将给出以下组件：

@Component({
    selector: 'my-app',
    template: `
          <div>
            <button (click)="addStyle()">Add Style</button>
            <h2>Hello</h2>
          </div>`, styles: [
        `
        :host {
          overflow-x: hidden;
          height: 50px;
          width: 200px;
          display: block;
        }
        `,
    ],
})
export class App {
    name: string;

    @HostBinding('style.overflow-y')
    overflowY = 'scroll';

    constructor() {
    }

    addStyle() {
        this.overflowY = 'hidden';
    }
}