Quelle est la bonne manière d'accéder à l'élément naturel dans angular2 (2 diff moyens) les docs sont rares

Quelle est la bonne manière d'accéder à l'élément naturel dans angular2 (2 diff moyens)
j'ai donc vu le code qui utilise:

constructor(ele: ElementRef) {
    let myEl = ele.nativeElement;
    //do some work on myEl such as jQuery(myEl).hide()
    ...

Ainsi que le code qui utilise les natifs de dom via BrowserDomAdapter:

constructor(viewContainer:ViewContainerRef) {
   let dom = new BrowserDomAdapter();
   let el = viewContainer.element.nativeElement; 
   let myEle = dom.getElementsByClassName(el, element)[0];
   //or jQuery(myEle).hide()
   ...

Je me demande ce qui est le Pro et le Contre et "bonne" façon de faire les choses.
Malheureusement, les docs semblent rares encore.

Je suis en supposant que ce dernier vous donnera les web workers soutien par le biais de l'interface, mais c'est juste mon hypothèse.

Je pense que vous l'avez vu avant, j'ai changé la source

OriginalL'auteur born2net | 2016-02-17

  1. 24
    <div #foo>
    @ViewChild() foo;
ngAfterViewInit(){
  foo.nativeElement...
}

    ou si transcluded

    @ContentChild() foo;
ngAfterContentInit(){
  foo.nativeElement...
}

    Permettre de choisir les éléments par la variable de modèle ou d'un composant ou d'une directive de type. (avec un type que vous aurez l'instance de composant au lieu de l'élément.

    ou

    constructor(@ViewChildren('foo') elements) {...  
constructor(@ContentChildren('foo') elements) {...

    @ViewChild fournit une vue en direct à l'appariement des éléments avec des modifications d'abonnement.

    Voir aussi

    Veuillez s'il vous plaît mettre à jour votre réponse avec les avantages/inconvénients de l'utilisation de deux façons.Semble intéressante question.
    Pas sûr que sur les avantages/inconvénients. DomAdapter doit être évitée autant que je sache. La modification natif directement à des éléments doivent être évités ainsi. Je pense que le Renderer fournit une API pour utiliser nativeElement Angulaire.
    dès maintenant difficile pour moi de comprendre pleinement sans exemples et des différents use cases mais merci pour le partage de connaissances.
    Ce que j'essaie de faire est d'obtenir un QueryList de LI éléments qui font partie de ma boucle: <li *ngFor="#item de la liste ; #index = index" .... mais le fragment de code suivant ne fonctionne pas @ViewChildren('li') foo; ngAfterViewChecked(){ console.journal(ce.foo); }
    oui c'est ce que je suis en train de faire... sa semble juste le "pas si angulaire chemin"... je veux dire, pensez-vous qu'il est acceptable pour stocker l'id de chaque LI élément et y accéder comme ça...? :/ tx!

    OriginalL'auteur Günter Zöchbauer

  2. 3

    Il y a (sans doute volontairement) fonctionnalité non documentée. Vous n'avez pas à traiter avec des points de vue et à injecter l'inputelements.

    En outre, il suffit de donner un

    constructor(private e: ElementRef)

    aussi de ne pas travailler, il va être compilable par le tapuscrit, mais il vous donnera une erreur de paramètre dans l'exécution initializaton.

    Enfin j'ai pu trouver une solution en seulement 3 heures de creusage:

    import { Component, Directive, ElementRef, Inject } from "@angular/core";

@Component({
    selector: "my-selector",
    template: "my-template"
})
export class MyComponent {
    private domNode: HTMLElement = null;
    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this.domNode = elementRef.nativeElement;
    }
}

    Comme vous pouvez le voir, le constructeur obtenir le ElementRef si et seulement si vous avez injecté le paramètre avec une @Inject(ElementRef) mot-clé. Les deux Inject et ElementRef doivent être importés à partir de l'angle de base.

    ElementRef.nativeElement est le DOM HTML nœud de ce que vous cherchez. Vous avez la chance de l'attraper que dans le constructeur, afin de ne pas manquer l'occasion.

    Dans l'angle de la documentation, ils essaient de vous convaincre que vous n'en avez pas besoin, dans leur dialecte, cela signifie qu'ils admettre que vous en avez besoin, mais ils ne veulent pas que vous l'utilisez.

    En plus tôt angulaire versions cela a fonctionné, même sans le @Inject chose, mais heureusement, l'Angulaire de développement toujours Provides nous nouvelles secrets dans leur otherways "stable".

    Extension:

    Il y avait un commentaire (actuellement déplacé dans un salon de discussion), il dit que l'annotation @Inject n'est pas nécessaire si vous avez emitDecoratorMetadata: true dans votre tsconfig.json. Mes expériences contredisent cela, en outre, il brise le mur entre la js et ts, mais il est aussi une solution possible. Il est possible que les expériences de l'auteur sont d'une semaine précédente.

    Les commentaires ne sont pas pour de longues discussions; cette conversation a été déplacé pour chat.

    OriginalL'auteur peterh