web-dev-qa-db-fra.com

Ionic2/Angular2/TypeScript: Comment accéder à un élément DOM dans une fonction 2016

Je n'arrive pas à trouver le moyen "correct" d'accéder à un élément DOM de manière à jour pour:
Angular2 + Ionic2 + TypeScript. 

Donc, étant donné ce scénario ci-dessous ... 

Q) Comment puis-je accéder à sketchElement dans la fonction sign ()?  

Modèle 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">

My settings.ts class:

@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

Vous pouvez utiliser le décorateur ViewChild. D'abord ajouter:

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

et dans votre composant, ajoutez la propriété correspondante:

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

  ngAfterViewInit() {
    // sketchElement is usable
  }
}

Voir ceci: http://plnkr.co/edit/0TV3ppA0Gpwr5CjOWlAu?p=preview .

Cette question pourrait aussi vous aider:

13
Thierry Templier

Je suis assez nouveau dans Ionic et Angular moi-même, mais j'ai aussi vu quelqu'un faire quelque chose via des directives avec du code utilisant ElementRef.
J'ai vu cela être utilisé dans le contexte d'un projet d3 Où ils l'ont fait:

import * as d3 from 'd3';

Ensuite, ils ont ajouté une image svg.
Le utilisé ce genre de code dans le constructeur de la directive:

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

Peut-être que cela peut être ajouté à votre constructeur.

0
JGFMK