Angular2+Typescript: как управлять элементом DOM?

обновление в 2017 году: ViewChild будет лучшим способом доступа к элементу Dom.

вопрос размещен в 2016 году:

Я пробовал следующие два метода, работает только метод 2. Но мне не нужен повторяющийся код: document.метод getElementById() в каждом методе. Я предпочитаю метод 1, но почему метод 1 не работает?

есть ли лучшие способы манипулировать DOM в Angular2?

.HTML-файл:

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

способ 1:

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

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

Способ 2:

...
class AppComponent {

    playVideo() {
        var videoElement = document.getElementById("movie");
        videoElement.play();
    }
}
6
angular dom typescript

2 ответов

<div #itemId>{{ (items()) }}</div>

вы можете получить доступ к элементу через ViewChild:

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

    @ViewChild('itemId') itemId; 

    ngAfterViewInit() {
      console.log(this.itemId.nativeElement.value);
    }
10

в соответствии с вашим вопросом вы хотите использовать некоторую общую часть кода в нескольких методах. но вы потерпели неудачу. просто объявите одну переменную и назначьте некоторые значения этой переменной, тогда вы сможете использовать эту переменную в нескольких методах, как это, или мы можем сказать, связать это значение переменной с двухсторонней привязкой данных angular using [(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>

здесь работает демо для того же http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview

-1