web-dev-qa-db-fra.com

Angular2: Quel est le meilleur moyen d'obtenir la référence d'un élément de modèle

Disons que j'ai un composant comme celui-ci dans Angular 2.

@Component ({
   directives: [Timeline, VideoPlayer],
   template: `<div>
    <span id="myId"></span>
    <videoplayer [mode]="mode"></videoplayer>
    <timeline [mode]="mode"></timeline>
  </div>`,
})
export class VideoEditor {
}

Comment puis-je obtenir une référence à un élément à partir d'un modèle? Par exemple, comment obtenir une référence à un <span>?

J'ai trouvé deux approches jusqu'à présent:

1) Obtenez une référence en utilisant ElementRef

export class VideoEditor {    
  constructor (private el: ElementRef) {
    el.nativeElement.getElementsBy.....;
  }
}

2) Utilisation de ViewChild

export class VideoEditor {  
  @ViewChild(Timeline) timeline: Timeline;  
  ngAfterViewInit () {
    this.timeline;
  }
}

3) Utilisation de variable de modèle locale

1) Ce que je n'aime pas dans une première approche, c'est que je dois faire getElementsBy...- comme fonction.

2) En ce qui concerne un second élément, je ne sais pas comment accéder à un élément HTML, je ne peux accéder qu’à un autre sous-composant. Et si j’ai plusieurs sous-composants du même type?

3) La variable de modèle local ne fonctionne que dans un modèle, ai-je raison?

Quel est le meilleur moyen d’obtenir une référence à un modèle dans Angular 2? Je voudrais quelque chose comme React a https: //facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

<input ref="myInput" />

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
javascriptangular
24
Jan Vorcak

Vous pouvez utiliser @ViewChild('varName') avec une variable de modèle (<tag #varName>) pour obtenir un élément spécifique lorsque vous en avez plusieurs du même type. Vous devriez quand même essayer d'éviter l'accès direct, utilisez plutôt des liaisons si possible.

36
Günter Zöchbauer