如何動態(tài)改變組件主機的CSS屬性？

我有一個組件，在它的CSS中，我給了它一個stlye:

:host {
  overflow-x: hidden
}

在從子組件單擊按鈕時，我需要將overflow-y: hidden添加到主組件中。

我如何實現(xiàn)這種行為？

下面是一個工作示例。

使用以下主機綁定:

@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';
    }
}

如果按鈕改變了組件源代碼中的某些內(nèi)容，還可以使用:has(..)偽選擇者。

例如。

:host:has(".someclassinside"){...}