希望根据用户提供的输入更新样式标记之间的值,在这种情况下不能使用类绑定。我可以让内联样式工作,唯一的问题是悬停样式和媒体查询,所以这也不是一个解决方案。有没有办法让这个变量可以应用于样式标签之间的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"
}
发布于 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;
}
}
https://stackoverflow.com/questions/50574515
复制相似问题