如何动态更改CSS in:host in angular 2？

Question

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

我有一个组件,在它的CSS我给它一个stlye:

:host {
  overflow-x: hidden
}

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

我该如何实现这种行为？

Answer 1

这是plnkr 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';
    }
  }