web-dev-qa-db-ja.com

Ionic2 / Angular2 / TypeScript：関数2016でDOM要素にアクセスする方法

以下の最新の方法でDOM要素にアクセスするための「正しい」方法を見つけることができないようです。
Angular2 + Ionic2 + TypeScript.

以下のこのシナリオを考えると...

Q）sign（）関数でsketchElementにアクセスするにはどうすればよいですか？

Settings.tsテンプレート：

<button full class="top-button-margin" (click)="sign()">
  Sign
  <ion-icon name="create"></ion-icon>
</button>
<img id="sketchElement" src="img/logo.png" padding *ngIf="showSignatureView">

私のsettings.tsクラス：

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {

  private currentUser: User = <User>{};
  private loggingOut: boolean = false;
  private currentConnection: string = "";
  private showSignatureView: boolean = false;

  constructor(
    private _platform: Platform,
    private _nav: NavController,
    private _events: Events,
    private _LoginService: LoginService,
    private _SessionService: SessionService,
    private _UIService: UIService) {

  }

  sign() {
    // I want to access sketchElement and its properties here.      
  }
}
typescriptangulargetelementbyidionic2
8
Dave

ViewChildデコレーターを使用できます。最初に追加：

<img id="sketchElement"
     #sketchElement
     src="img/logo.png" padding *ngIf="showSignatureView">

コンポーネントに、対応するプロパティを追加します。

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {
  @ViewChild('sketchElement')
  sketchElement:ElementRef;

  ngAfterViewInit() {
    // sketchElement is usable
  }
}

このplunkrを参照してください： http://plnkr.co/edit/0TV3ppA0Gpwr5CjOWlAu?p=preview 。

この質問は、次の場合にも役立ちます。

13
Thierry Templier

私はIonicおよびAngular自分自身に慣れていませんが、ElementRefを使用するコードでディレクティブを介して何かを実行することも見ました。
私はこれがd3プロジェクトのコンテキスト内で使用されているのを見ました：

import * as d3 from 'd3';

次に、画像svgを追加しました。
ディレクティブコンストラクターで次の種類のコードを使用しました：

import {ElementRef} from '@angular/core';
constructor (private elementRef : ElementRef) {
   let el = this.elementRef.nativeElement;
   var svg = d3.select(el).append('svg');
}

多分これはあなたのコンストラクタに追加することができます。

0
JGFMK