Angular 4 @HostBinding 绑定(bind)到 style 属性

Question

我正在尝试使用指令绑定(bind)到 ele 的 style prop

import {Directive, OnInit, ElementRef, HostListener, HostBinding} from "@angular/core";

@Directive({
    "selector":"[high-light-direc]"
})
export class HighlightDirec implements OnInit{
    @HostBinding('style') style:{backgroundColor:string};
    constructor(private elementRef:ElementRef){}
    ngOnInit(){
        
    }
    @HostListener('mouseenter') x(){
        this.style.backgroundColor = 'blue';
    }
    @HostListener('mouseleave') y(){
        this.style.backgroundColor='transparent';
    }
}

  <div>
    <p high-light-direc>
      {{toShow}}
    </p>
  </div>

当我尝试为 backgroundColor 属性赋值时，我收到此错误 TypeError: Cannot set property 'backgroundColor' of undefined 。

那么如何为 Binded 样式 obj 中的 backgroundColor 属性赋值。

Answer 1

Take a look at the code:

Stack Blitz

Explanation:

1. 使用 Style Sanitizer this.sanitizer.bypassSecurityTrustStyle
2. 您必须发送经过净化的 CSS:@HostBinding('style') style: SafeStyle;

3. 然后按如下方式设置值:

   @HostListener('mouseenter') x() {
      this.style = this.sanitizer.bypassSecurityTrustStyle("background-
      color: lime");
   }
   @HostListener('mouseleave') y() {
     this.style = this.sanitizer.bypassSecurityTrustStyle("background-color: transparent");
   }