样式标记之间的角度、动态样式
样式标记之间的角度、动态样式
提问于 2018-05-29 07:33:06
希望根据用户提供的输入更新样式标记之间的值，在这种情况下不能使用类绑定。我可以让内联样式工作，唯一的问题是悬停样式和媒体查询，所以这也不是一个解决方案。有没有办法让这个变量可以应用于样式标签之间的CSS值？
@Component({
selector: 'app-teststyle',
template: `
<h1>Text ({{color}})</h1>
<style>h1 {color:{{color}}}h1:hover{color:{{colorHover}}}</style>
`,
styles: [
`
h1 {color: $color}
h1:hover {color:blue}
`
]
})
export class UsersComponent implements OnInit {
color: string = "red";
colorHover: string = "blue"
}回答 1
Stack Overflow用户
发布于 2018-05-29 09:03:44
您应该选中NgStyle https://angular.io/api/common/NgStyle
要实现悬停，应使用mouseover和mouseout事件来操作颜色
@Component({
selector: 'app-teststyle',
template: `
<h1 [ngStyle]="style" (mouseover)="onMouseOver()" (mouseout)="onMouseOut()">Text ({{color}})</h1>
`,
styles: [
]
})
export class UsersComponent implements OnInit {
color: string = "red";
colorHover: string = "blue"
style: any = { 'color': ''}
constructor() {
this.style = { 'color': this.color};
}
onMouseOver() {
this.style.color = this.colorHover
}
onMouseOut(){
this.style.color = this.color;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50574515
复制相关文章
相似问题