1
votes

Est-il acceptable d'utiliser getElementById dans Angular?

J'étais en train de parcourir la documentation Angular et j'ai vu l'extrait de code suivant. Au fond de moi, je pensais avoir rappelé que l'utilisation de document.getElementById () dans Angular est mal vue, et même l'utilisation de ElementRefs est déconseillée (pour aider à prévenir les attaques XSS ). Si ceux-ci sont effectivement découragés, quelle est la meilleure pratique pour mettre en place un observable pour les événements sur un élément particulier?

de Documentation sur les observables angulaires

< pré> XXX

angular rxjs

3 commentaires

Vous pouvez utiliser des variables de modèle, puis utiliser @ViewChild ('votre nom de variable de modèle') pour accéder à l'élément.

cette réponse vous aidera, stackoverflow.com/questions/38944725/...

échantillon bizarre de la documentation en l'utilisant de cette façon, je suppose que c'est "ok" alors quand l'échantillon est dans la documentation officielle: D je ne le ferais pas du tout de cette façon. J'attacherais peut-être un formcontrol à l'entrée et écouterais valueChanges .

3 Réponses :

2
votes

Je suggère d'utiliser les angulaires ViewChild pour interagir avec les composants de votre modèle.

ViewChild - décorateur API

Décorateur de propriétés qui configure une requête de vue. Le détecteur de changement recherche le premier élément ou la directive correspondant au sélecteur dans la vue DOM. Si la vue DOM change et qu'un nouvel enfant correspond au sélecteur, la propriété est mise à jour.

Eg:

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

@Directive({selector: 'pane'})
export class Pane {
  @Input() id !: string;
}

@Component({
  selector: 'example-app',
  template: `
    <pane id="1" *ngIf="shouldShow"></pane>
    <pane id="2" *ngIf="!shouldShow"></pane>

    <button (click)="toggle()">Toggle</button>

    <div>Selected: {{selectedPane}}</div>
  `,
})
export class ViewChildComp {
  @ViewChild(Pane, {static: false})
  set pane(v: Pane) {
    setTimeout(() => { this.selectedPane = v.id; }, 0);
  }
  selectedPane: string = '';
  shouldShow = true;
  toggle() { this.shouldShow = !this.shouldShow; }
}

Voici un bon exemple pour Comprendre ViewChildren, ContentChildren et QueryList dans Angular

2 commentaires

Est-ce que je me trompe ou la syntaxe !: n'est plus prise en charge?

L'exemple Hmmm provient de l'API angular.io/api/core/ViewChild , peut-être obsolète?

1
votes

Utiliser un formulaire réactif est probablement une meilleure approche

//HTML:
<input #search [formControl]="search"/>

//Component
search=new FormControl('')
search.valueChanges.pipe(
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
).subscribe();

0 commentaires

2
votes

C'est une mauvaise approche d'utiliser le travail manuel avec DOM en angular. Dans les applications angulaires, vous devez toujours utiliser les méthodes angulaires pour le rendu de la page. Parce que dans la plupart des cas, vous devrez fournir un rendu côté serveur à l'avenir pour que votre application rende celle-ci conviviale pour Google. Mais le moteur SSR d'angular (Angular Universal) sur le backend émule uniquement les objets XHR mais pas les méthodes DOM.

0 commentaires