[如何操作 Angular 8中的样式

Question

想要操纵样式的显示。这是模板：

<div style="display: none" #myDiv />

认为有两种方法可以做到：

1. 直接

   if (1===1) this.myDiv.style.display = "block";

2. 通过@ViewChild

   @ViewChild('myDiv', { static: false}) myDiv
   if (1===1) this.myDiv.style.display = "block";

无工作。

Answer 1

您可以如下使用ElementRef。

HTML

ElementRef

TS

<div class="my-div" style="display: none" />

然后您可以使用

export class MyComponent implements AfterViewInit  {

  myDiv;

  constructor(private elementRef:ElementRef) {}

  ngAfterViewInit() {

    this.myDiv = this.elementRef.nativeElement.querySelector('.my-div');
  }
}

变量如下更改样式。

myDiv

this.myDiv.style.display = 'block';