在 Ionic 2 中按 id 检索 DOM 元素答案

【问题标题】：Retrieve DOM element by id in Ionic 2在 Ionic 2 中按 id 检索 DOM 元素
【发布时间】：2016-10-27 12:03:16
【问题描述】：

我在home.html 中有一个<div>，如下所示。我必须通过 ID 检索此元素 myDiv 然后将其作为对 JS 方法的引用传递。我使用@ViewChild 进行了尝试，它在Ionic 2 beta 11 中工作。将 Ionic 升级到最新的rc 版本后，它已停止工作。

这是我的home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="myDiv" #myDiv></div>
<ion-content>

这是我的home.ts：

import { Component, ViewChild, ElementRef} from '@angular/core';

import { NavController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    @ViewChild('myDiv') defaultContent: ElementRef;

    ngAfterViewInit() {
        // console.log("ngView");
        var myDiv: HTMLDivElement = this.defaultContent.nativeElement;
    }

    constructor(public navCtrl: NavController) {
    }

}

这是我的 Ionic 信息：

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.3 
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v6.8.0
Xcode version: Xcode 8.0 Build version 8A218a

【问题讨论】：

标签： javascript angular ionic2

【解决方案1】：

你应该尝试开始使用更多的 angular2 和 typescript :)

public myDiv:string = '';


ngAfterViewInit() {
    // console.log("ngView");
    this.myDiv = this.defaultContent.nativeElement;
}

然后在你的html中

<div padding [innerHTML]="myDiv"></div>

【讨论】：

非常感谢您的指点。欣赏它。我们将尝试这些建议，并会尽快给您写信。