如何在angular 2中动态更改：host中的CSS？

ippsafx7 于 2023-05-19 发布在 Angular

关注(0)|答案(2)|浏览(144)

如何动态更改组件主机的CSS属性？
我有一个组件，在它的CSS我给它一个stlye：

:host {
  overflow-x: hidden
}

在子组件中单击按钮时，我需要将overflow-y: hidden添加到主机组件。
我如何实现这种行为？

css

来源：https://stackoverflow.com/questions/44122081/how-to-dynamically-change-css-in-host-in-angular-2

2条答案

按热度按时间

3htmauhk1#

Here is a working example.
使用以下HostBinding：

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

赞(0）回复(0）举报 2023-05-19

jdgnovmf2#

如果按钮更改了组件源代码中的某些内容，也可以使用:has(..)伪选择器。
例如。