angular - 从 Ionic 3.5 中的 Controller 内部 View 获取元素

Question

我想在 Ionic 3.5 中完成一个简单的任务，我想在页面加载后加载一个函数来显示图像“广告”。

目前我有一个按钮设置，当您单击它时，它会正确加载此图像。我只希望此功能也能在页面加载时自动发生。

我试图像这样在页面加载时运行函数......

import { Component, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';


@IonicPage({
  segment: 'sponsor/:sponsorId'
})
@Component({
  selector: 'page-sponsor-detail',
  templateUrl: 'sponsor-detail.html',
})

export class SponsorDetailPage {

  // @ViewChild('#myImage') myImage: ElementRef;

  sponsor: any;
  _imageViewerCtrl: ImageViewerController;

  constructor(public navCtrl: NavController, public navParams: NavParams, imageViewerCtrl: ImageViewerController, private element: ElementRef) {
    this._imageViewerCtrl = imageViewerCtrl;
  }

  ionViewWillEnter() {
      var imgObj = this.element.nativeElement.querySelector('#myImage');
      console.log(this.element);
      console.log(imgObj);
      // this.presentImage(imgObj);
  }

  presentImage(myImage: any) {
      const imageViewer = this._imageViewerCtrl.create(myImage);
      imageViewer.present();
  }

赞助详情查看

//sponsor-detail.html
<button *ngIf="sponsor?.ad" ion-button round (click)="presentImage(myImage)"><ion-icon name="eye"></ion-icon>&nbsp;Visit Ad</button>
<img id="myImage" style="display:none;" [src]="sponsor?.ad" #myImage (click)="presentImage(myImage)" />

但是，尽管“this.element”包含我试图定位的 View 上的所有数据，但我似乎无法从 querySelector 返回任何数据。我曾尝试将事件定位为“img”标签，但它也不会返回任何内容。我阅读了一些有关 ViewChild 的内容，但无法使用它自己实现任何内容。

也许另一种解决方案是在页面渲染完成后触发 View 中的点击事件，但我想确保该解决方案能够跨平台工作。

我是 Ionic 和 Angular 的新手，非常感谢任何帮助!

Answer 1

您可以使用ionViewDidLoad 方法:

@Page({
  templateUrl: 'build/pages/somepage/somepage.html'
})
export class SomePage {
  constructor() {
    // ...
  }

  ionViewDidLoad() {
    // Put here the code you want to execute after the page has fully loaded
  }
}

此外，现在更好的方法是使用局部变量而不是搜索 DOM。您可以像这样给某些东西一个局部变量:

<img id="myImage" style="display:none;" [src]="sponsor?.ad" #myImage (click)="presentImage(myImage)" />

然后使用 @ViewChild 获取它:

import {ElementRef, ViewChild} from '@angular/core';
@ViewChild('myImage') myImage: ElementRef;

ionViewDidLoad() {
    // do what you want with this.myImage
}