查询选择器需要在离子页面/角度中超时

Question

这有效：

 ionViewDidLoad() {  
  var that = this;
          setTimeout(function () {
              that.img = that.el.nativeElement.querySelector('.user-image');
              alert(that.img.src);
          }, 300);
}

这不行

ionViewDidLoad() {
      var that = this;
      that.img = that.el.nativeElement.querySelector('.user-image');
      alert(that.img.src);
}

我确信这不是正确的行为。我真的不想为了得到这个而设置一个超时。那么为什么会这样，如何解决呢？

输入我拥有的 html 文件：

<img class="user-image img-responsive full-width " *ngIf="user.pictureURL" src="myurl.com{{user.pictureURL}}"  />

Answer 1

这是因为 html 模板可能会在调用后加载。您需要使用 ViewChild 来获取 ElementRef

<img #imageId class="user-image img-responsive full-width " *ngIf="user.pictureURL" src="myurl.com{{user.pictureURL}}"  /><!--set id with # -->

在组件中：

import {ViewChild, ElementRef} from '@angular/core';
//...In class,
@ViewChild('imageId') imageElement:ElementRef;
ionViewDidLoad() {
   alert(this.imageElement.nativeElement.src);
}