如何在 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?的主要内容,如果未能解决你的问题,请参考以下文章