Angular2+Tapuscrit: comment manipuler l'élément DOM?

Mise à jour en 2017:
ViewChild sera le meilleur moyen pour accéder à l'élément Dom.

Question publiée en 2016:

J'ai essayé les deux méthodes suivantes, seule méthode 2 fonctionne. Mais je ne veux pas le code à répétition: document.getElementById() dans chaque méthode. Je préfère la méthode 1, mais pourquoi la méthode 1 ne fonctionne pas?

Y a de meilleures façons de manipuler le DOM dans Angular2?

.fichier html:

<video id="movie" width="480px" autoplay>
    <source src="img/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Méthode 1:

...
class AppComponent {
    videoElement = document.getElementById("movie");

    playVideo() {
        this.videoElement.play();
    }
}

Méthode 2:

...
class AppComponent {

    playVideo() {
        var videoElement = document.getElementById("movie");
        videoElement.play();
    }
}
  • ce que vous voulez demander de plus ? avec un peu plus de code ou plunkr si possible. semble à la fois les méthodes post a fait de même est-il pas ?
  • Je sais que cela ressemble même pour les variables, mais en fait pour l'élément DOM, il existe une différence entre la déclaration d'un élément du DOM variable à l'intérieur de la méthode et à l'extérieur de la méthode. Il semble très bizarre, mais j'obtiens cette conclusion après la première méthode a échoué.
  • whats les conclusions que vous en avez eu ? est-il une différence majeure entre les deux ? si oui, donner comme réponse peut être utile à d'autres personnes.
InformationsquelleAutor Ng2-Fun | 2016-03-04
  1. 10
    <div #itemId>{{ (items()) }}</div>

    Vous pouvez accéder à l'Élément via ViewChild:

    import {ViewChild} from '@angular/core';

    @ViewChild('itemId') itemId; 

    ngAfterViewInit() {
      console.log(this.itemId.nativeElement.value);
    }
    InformationsquelleAutor mahdi kallel
  2. -1

    Selon votre question, vous souhaitez utiliser certaines communes portion de code dans plusieurs méthodes. mais vous avez échoué. il suffit de déclarer une variable unique et attribuer des valeurs à des variables, alors vous serez en mesure d'utiliser cette variable dans plusieurs méthodes comme cela, ou nous pouvons dire lier cette valeur de la variable avec les deux sens de la liaison de données angulaires à l'aide de [(ngModel)]:

       class A {
       abc:string = null;
       abc2:string = null;

       abcFun(){
         console.log(this.abc)
        }

       bcdFun(){
         console.log(this.abc)
        } 

        //second method using javascript as your way
          abcFun2(){
            this.abc2 = document.getElementById('abc2').value;
            console.log(this.abc2);
          }
          bcdFun2(){
           console.log(this.abc2);
          }  
    }

<input type="text" id="abc" [(ngModel)]="abc"> {{abc}}

<button (click)="abcFun()">ABC FUN</button>
<button (click)="bcdFun()">BCD FUN</button>


<input type="text" id="abc2"> {{abc2}}

<button (click)="abcFun2()">ABC FUN</button>
<button (click)="bcdFun2()">BCD FUN</button>

    voici de travail de démonstration pour la même http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview

    • J'ai essayé votre code ci-dessus, il ne fonctionne pas non plus. Avez-vous déjà tester?
    • consultez maintenant, le travail de démonstration attaché à un lien. vous pouvez utiliser les deux sens de la liaison de données trop.
    • Merci pour votre aide. Désolé j'ai eu des problème pour créer un angular2 application sur Plunker et ne pouvez pas modifier votre code sur Plunker. Mais j'ai mis à jour le code ci-dessus. Vous avez mal compris ma question. Ma question est tout au sujet de manipulation du DOM du document.getElementById(). Parce que je veux jouer/mettre en pause la vidéo, je dois obtenir l'élément. Le truc c'est que si je définis videoElement variable en dehors de méthodes est différent définie à l'intérieur de la méthode. La première méthode consiste à obtenir une erreur, nous ne pouvons pas accéder à l'élément DOM lorsqu'elle est définie en dehors de la méthode. Pouvez-vous m'accorder le droit de modifier votre plunker?
    • oups, je ne trouve pas de mp4 espace réservé à montrer une vidéo. Et ce plunker n'est pas modifiable pour moi.
    InformationsquelleAutor Pardeep Jain