如何在Angular 2中的:host中动态更改CSS? [英] How to dynamically change CSS in :host in angular 2?

问题描述

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

How do I dynamically change CSS properties of a component host?

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

I have a component and in it's CSS I have given it a stlye:

:host {
  overflow-x: hidden
}

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

On a button click from child component, I need to add overflow-y: hidden to the host component.

如何实现这种行为?

推荐答案

这是一个有效的示例

使用以下HostBinding:

Use the following 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';
    }
}

这篇关于如何在Angular 2中的:host中动态更改CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！