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

Posted 2023-03-05

【中文标题】从角度类型脚本初始化 html 标记

【英文标题】：initialize html tag from angular type-script

【发布时间】：2022-01-23 12:25:01

【问题描述】：

如下角类型脚本代码所示，我想参考下面发布的.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>

【问题讨论】：

尝试使用var代替this.container、this.AoC等，看看是否可行

@MasterAzazel 能否提供一些代码

【参考方案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>```

【讨论】：

能否提供一些代码

我加了一个简单的例子