Comment puis-je sélectionner un élément dans un modèle de composant?

Quelqu'un sait-il comment mettre la main sur un élément défini dans un modèle de composant? Le polymère le rend vraiment facile avec $et $$.

Je me demandais juste comment m'y prendre dans Angular.

Prenons l'exemple du tutoriel:

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

@Component({
    selector:'display',
    template:`
     <input #myname (input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
     `   
})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

Comment puis-je intercepter ou obtenir une référence de l' élément pou à inputpartir de la définition de classe?

Au lieu d'injecter ElementRefet d'utiliser querySelectorou similaire à partir de là, un moyen déclaratif peut être utilisé à la place pour accéder directement aux éléments de la vue:

<input #myname>

@ViewChild('myname') input; 

élément

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

Exemple StackBlitz

• @ViewChild () prend en charge la directive ou le type de composant comme paramètre, ou le nom (chaîne) d'une variable de modèle.
• @ViewChildren () prend également en charge une liste de noms en tant que liste séparée par des virgules (actuellement aucun espace n'est autorisé @ViewChildren('var1,var2,var3')).
• @ContentChild () et @ContentChildren () font de même mais dans le DOM léger ( <ng-content>éléments projetés).

descendance

@ContentChildren() est le seul qui permet également d'interroger les descendants

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 

{descendants: true}devrait être la valeur par défaut mais n'est pas dans la version 2.0.0 finale et il est considéré comme un bug
Cela a été corrigé dans la version 2.0.1

lis

S'il existe un composant et des directives, le readparamètre permet de spécifier quelle instance doit être retournée.

Par exemple, ce ViewContainerRefqui est requis par les composants créés dynamiquement au lieu de la valeur par défautElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

abonner les modifications

Même si les enfants de vue ne sont définis que lorsque ngAfterViewInit()est appelé et les enfants de contenu ne sont définis que lorsque ngAfterContentInit()est appelé, si vous souhaitez vous abonner aux modifications du résultat de la requête, cela doit être fait dansngOnInit()

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

accès direct au DOM

peut uniquement interroger des éléments DOM, mais pas des composants ou des instances de directive:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

obtenir un contenu projeté arbitraire

Voir Accéder au contenu transclus

Vous pouvez obtenir un handle vers l'élément DOM via ElementRefen l'injectant dans le constructeur de votre composant:

constructor(myElement: ElementRef) { ... }

Documents: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector:'display',
  template:`
   <input (input)="updateName($event.target.value)">
   <p> My name : {{ myName }}</p>
  `
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {
    var el = this.element.nativeElement;
    console.log(el);
  }
  updateName(value) {
    // ...
  }
}

Exemple mis à jour pour fonctionner avec la dernière version

Pour plus de détails sur l'élément natif, ici

Angular 4+ : utilisationrenderer.selectRootElement avec un sélecteur CSS pour accéder à l'élément.

J'ai un formulaire qui affiche initialement une entrée e-mail. Une fois l'e-mail entré, le formulaire sera développé pour leur permettre de continuer à ajouter des informations relatives à leur projet. Cependant, s’ils ne le sont pas un client existant, le formulaire comprendra une section d'adresse au-dessus de la section d'informations sur le projet.

Pour l'instant, la partie saisie de données n'a pas été divisée en composants, les sections sont donc gérées avec les directives * ngIf. Je dois mettre l'accent sur le champ des notes du projet s'il s'agit d'un client existant ou sur le champ du prénom s'il est nouveau.

J'ai essayé les solutions sans succès. Cependant, la mise à jour 3 de cette réponse m'a donné la moitié de la solution finale. L'autre moitié provient de la réponse de MatteoNY dans ce fil. Le résultat est le suivant:

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    // Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

Étant donné que la seule chose que je fais est de mettre l'accent sur un élément, je n'ai pas besoin de me préoccuper de la détection des modifications, donc je peux réellement lancer l'appel à renderer.selectRootElement extérieur d'Angular. Étant donné que je dois donner le temps aux nouvelles sections de s'afficher, la section de l'élément est enveloppée dans un délai d'expiration pour permettre aux threads de rendu de rattraper le temps avant que la sélection de l'élément ne soit tentée. Une fois tout cela configuré, je peux simplement appeler l'élément en utilisant des sélecteurs CSS de base.

Je sais que cet exemple concerne principalement l'événement focus, mais il est difficile pour moi que cela ne puisse pas être utilisé dans d'autres contextes.

Pour les personnes essayant de saisir l'instance de composant dans un *ngIfou *ngSwitchCase, vous pouvez suivre cette astuce.

Créez une initdirective.

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

Exportez votre composant sous un nom tel que myComponent

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

Utilisez ce modèle pour obtenir l' instance ElementRefANDMyComponent

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

Utilisez ce code dans TypeScript

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}

importer le ViewChilddécorateur de@angular/core , comme ceci:

Code HTML:

<form #f="ngForm"> 
  ... 
  ... 
</form>

Code TS:

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

class TemplateFormComponent {

  @ViewChild('f') myForm: any;
    .
    .
    .
}

vous pouvez maintenant utiliser l'objet 'myForm' pour accéder à n'importe quel élément qu'il contient dans la classe.

Source

 */
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}

Remarque : Cela ne s'applique pas à Angular 6 et supérieur, comme celaElementRefest devenuElementRef<T>enTindiquant le type denativeElement.

Je voudrais ajouter que si vous utilisez ElementRef, comme recommandé par toutes les réponses, vous rencontrerez immédiatement le problème qui ElementRefa une déclaration de type horrible qui ressemble à

export declare class ElementRef {
  nativeElement: any;
}

c'est stupide dans un environnement de navigateur où nativeElement est un HTMLElement.

Pour contourner ce problème, vous pouvez utiliser la technique suivante

import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';

interface ElementRef {
  nativeElement: HTMLElement;
}

@Component({...}) export class MyComponent {
  constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}

pour obtenir le prochain frère immédiat, utilisez ceci

event.source._elementRef.nativeElement.nextElementSibling

Sélection de l'élément cible dans la liste. Il est facile de sélectionner un élément particulier dans la liste des mêmes éléments.

code composant:

export class AppComponent {
  title = 'app';

  listEvents = [
    {'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
    {'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
  ];

  selectElement(item: string, value: number) {
    console.log("item="+item+" value="+value);
    if(this.listEvents[value].class == "") {
      this.listEvents[value].class='selected';
    } else {
      this.listEvents[value].class= '';
    }
  }
}

Code HTML:

<ul *ngFor="let event of listEvents; let i = index">
   <li  (click)="selectElement(event.name, i)" [class]="event.class">
  {{ event.name }}
</li>

code CSS:

.selected {
  color: red;
  background:blue;
}

Exemple minimal pour une utilisation rapide:

import { Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'my-app',
  template:
  `
  <input #inputEl value="hithere">
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('inputEl') inputEl:ElementRef; 

  ngAfterViewInit() {
    console.log(this.inputEl);
  }
}

1. Mettez une variable de référence de modèle sur l'élément DOM d'intérêt. Dans notre exemple, c'est le #inputElsur l' <input>étiquette.
2. Dans notre classe de composants, injectez l'élément DOM via le décorateur @ViewChild
3. Accédez à l'élément dans le ngAfterViewInitcrochet du cycle de vie.

Remarque:

Si vous souhaitez manipuler les éléments DOM, utilisez l'API Renderer2 au lieu d'accéder directement aux éléments. Autoriser l'accès direct au DOM peut rendre votre application plus vulnérable aux attaques XSS