从角度类型脚本初始化 html 标记

Question

如下角类型脚本代码所示，我想参考下面发布的.html代码中提到的划分，使用document.getElementById 日志语句的结果是null

请告诉我如何正确引用 type-script 中的 html-tag

.ts：

  export class GridCellPopupOverlayComponent implements OnInit {
  isVisible = true
  container: any
  content
  closer: any
  overlay: any
  AoC: any
  AvgH: any
  Dist: any
  I: any

  constructor() { 
  }

  initHTMLElements() {
    console.log("html init")
    this.container = document.getElementById('idGridCellInfoPopupDiv');
    this.AoC = document.getElementById('idGridCellInfoAoCValueDiv');
    this.AvgH = document.getElementById('idGridCellInfoAvgHValueDiv');
    this.Dist = document.getElementById('idGridCellInfoDistValueDiv');
    this.I = document.getElementById('idGridCellInfoIValueDiv');
    this.closer = document.getElementById('gridCellInfoPopup-closer');
    console.log("this.AoC:",this.AoC)

  }
  }
  

html：

<div *ngIf="isVisible" id="idGridCellInfoPopupDiv" class="ol-popup">
<a href="#" id="gridCellInfoPopup-closer" class="ol-popup-closer"></a>
<!-- <span id="idGridCellLabel" class="label label-success">dsfdsfsa</span> -->
<div class="alert alert-success alert-sm" role="alert">
  <div class="alert-items">
      <div class="alert-item static">
          <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="check-circle"></clr-icon>
          </div>
          <div id="idGridCellAlertText"class="alert-text">
          </div>
      </div>
  </div>
  <!-- <button type="button" class="close" aria-label="Close">
      <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button> -->
</div>


<div id="idGridCellInfoAoCValueDiv"></div>
<div id="idGridCellInfoAvgHValueDiv"></div>
<div id="idGridCellInfoDistValueDiv"></div>
<div id="idGridCellInfoIValueDiv"></div>

Answer 1

您可以使用 @ViewChild/@ViewChildren 装饰器从 .html 获取元素。他们在幕后使用document.getElementById。这是 Angular 中的正确方法。

还要注意ngAfterViewInit lifeycle 方法，您可以在其中访问您的参考资料。在调用 ngAfterViewInit 回调之前设置视图查询。 （形成 Angular 文档）

这是参考：https://angular.io/api/core/ViewChild

顺便说一句，您可以省略static: false，因为它是默认值。

TS 文件

import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';

  @ViewChild('pRef', {static: false}) pRef: ElementRef;

    ngAfterViewInit() {
    console.log(this.pRef.nativeElement.innerHTML); 
    this.pRef.nativeElement.innerHTML = "DOM updated succesfully!!!"; 
  }
}

模板文件

<hello name="{{ name }}" ></hello>

<p #pRef>
  Start editing to see some magic happen :)
</p>```