Question

要根据用户提供的输入更新样式标记之间的值，在这种情况下不能使用类绑定。我可以使内联样式工作，唯一的问题是悬停样式和媒体查询，所以这也不是一个解决方案。有没有办法让这个变量可以应用于样式标签之间的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"

}

Answer 1

您应该检查 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;
  }

}

样式标签之间的角度动态样式

1 个答案: