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

Posted

技术标签:

【中文标题】如何在 Angular 2 中动态更改 :host 中的 CSS?【英文标题】:How to dynamically change CSS in :host in angular 2? 【发布时间】:2017-10-22 15:43:41 【问题描述】:

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

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

:host 
  overflow-x: hidden

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

如何实现这种行为?

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于如何在 Angular 2 中动态更改 :host 中的 CSS?的主要内容,如果未能解决你的问题,请参考以下文章

带有 ngmodel 的 Angular 2 动态表单示例导致“表达式在检查后已更改”

Angular:如何动态更改 scss 变量?

Angular 2:是不是可以在动态组件中绑定 var?

如何在 Angular 中更改 svg 元素的颜色?

如何在angular2中的选择更改事件中获取值

如何检索动态框值(如果选中,则为真或假) - Angular 6