Sûr, window.document.querySelector, ou window.document.querySelectorAll.
Downvote: je ne vois pas comment cette réponse fournit un "Angular2-chemin", comme demandé par l'OP L'OP n'a pas dit "Angulaire à 2 voies". Il a juste dit "Angulaire 2". Notez que cela a été accepté de répondre pour ce...presque un an? Et l'OP upvoted. Sérieusement...de meilleures façons de passer votre temps. je pense que l'angle de 2 voies est plus eadapter pour le contexte, si j'utilise Angulaire il est évident que j'ai besoin de faire le "TheFrameworkIuse". Je pense que cela devrait être laissé à l'OP, qui upvoted la réponse. "Évidente" est souvent plus relative que l'individu croit. Questions avec seulement les balises de référence angulaire implique qu'elle doit être une réponse angulaire
C'est bon à savoir ce genre de chose, mais au fil des années, et après tout, l'angle de code que j'ai écrit, je suis venue à l'esprit: si c'est simple, lisible, les œuvres, et peut être testé, alors il n'y a rien de mal à cela. Angulaire permet de faire certaines choses très simples incroyablement douloureuse, et si une plaine ol' JS solution est supérieure, dans la pratique et adapté à votre besoin, puis l'utiliser. Après tout, Angulaire est qu'un outil, ce n'est pas le final de la bible.
Je vais à la poste comme une autre réponse, au lieu de modifier l'ancien, parce que à mon humble avis, les deux approches sont utiles. Mais cela est très certainement beaucoup plus de "Angularish".
Il y a deux Angularish-2 façons d'obtenir une référence à un modèle de l'élément DOM; ElementRef, et ViewChild. Il y a peut être plus, mais ce sont les deux qui mentionne partout.
ElementRef est probablement préférable d'éviter. Bien entendu, il vous ouvre à de potentielles attaques XSS. Il y a toutes sortes de rouge "méfiez-vous" autour de la documentation.
Alors je me suis rabattue sur quelque chose qui fonctionne vraiment bien, que ViewChild.
Mon template:
<input #myinput type="text" />
Avis que vilain à la recherche #myInput. Il sert comme un IDENTIFIANT, mais pas une plaine ol' DOM id=". Je suppose qu'il vous permet de vous autour de l'Id unique problème, ainsi que le vilain hack de l'étiquetage des éléments vides classes CSS à la place de Id.
Dans votre code: Remarque j'utilise ES6 sans annotations. mais pour obtenir le même effet, vous pouvez utiliser le @ViewChild annotation. C'est bien la doc avais en TS (pas dans l'ES6, il m'a fallu un certain temps pour reconstituer).
Pour info j'ai dû trouver un moyen propre de faire cela parce que je voulais mettre en œuvre un RxJS ruisseau de faire quelques anti-rebond et autres joyeusetés.
import { Component, ngOnInit, ViewChild } from '@angular/core';
class HomeComponent {
constructor( ) {}
ngOnInit ( ) {
//.nativeElement console.log's out to what you'd expect.
var inputBox = this.myInputRef.nativeElement;
//left this in to demonstrate it works as plain ol' DOM elem,
//if it didn't, this wouldn't work.
var source = Rx.Observable.fromEvent(inputBox, 'click');
...
}
}
HomeComponent.annotations = [
new Component ( {
templateUrl: './views/home/home.component.html',
queries: { 'myInputRef': new ViewChild ( 'myinput' ) }
} )
];
export { HomeComponent }
Fonctionne comme un charme. Temps que nous avons eu quelque chose comme cela dans Angulaire. JQLite n'a jamais vraiment coupé.
ViewChild est exactement le même que ElementRef btw Omg...non, il ne l'est pas. Même pas proche (si c'était qu'ils ne vous embêtez pas avec les autres). Yip, c'est juste une autre façon de faire le même objet. Le XSS avertissement sont à faire avec la mise à jour/insererting éléments dans le DOM directement via nativeElement méthodes - comme Angulaire de ne pas arriver à l'appliquer 'nettoyage' des opérateurs sur la mise à jour des éléments. C'est un peu survendu si, comme il y a très peu de fois vous devez mettre à jour les DOM fourni par l'utilisateur de HTML. Le Renderer2 et ViewChild/ViewContent systèmes sont assez limitées à de nombreux égards. La plupart des mnp modules/bibliothèques Angulaire document d'accès/de la fenêtre, si vous avez un coup d'oeil à la source par exemple, github.com/angular/material2/blob/master/src/cdk/overlay/... Vous remarquerez aussi dans ce lien l'utilisation de _methodName pour leurs méthodes privées, qui est l'une des choses que nous ne sommes pas supposé faire (du style conventions). Différence entre les meilleures pratiques et de praticité:-)
Sûr,
window.document.querySelector, ouwindow.document.querySelectorAll.L'OP n'a pas dit "Angulaire à 2 voies". Il a juste dit "Angulaire 2". Notez que cela a été accepté de répondre pour ce...presque un an? Et l'OP upvoted. Sérieusement...de meilleures façons de passer votre temps.
je pense que l'angle de 2 voies est plus eadapter pour le contexte, si j'utilise Angulaire il est évident que j'ai besoin de faire le "TheFrameworkIuse".
Je pense que cela devrait être laissé à l'OP, qui upvoted la réponse. "Évidente" est souvent plus relative que l'individu croit.
Questions avec seulement les balises de référence angulaire implique qu'elle doit être une réponse angulaire
OriginalL'auteur Tim Consolazio
Il est recommandé de ne pas accéder au DOM directement dans angular2, depuis votre sont en contournant le Angular2 convertisseur
Vous pouvez utiliser d'autres angulaire 2 caractéristiques de le faire, par exemple: l'ajout référence à cet élément.
Découvrez ce problème, il peut vous aider à:
Comment obtenir de l'élément dom angulaire 2
OriginalL'auteur michali
Je vais à la poste comme une autre réponse, au lieu de modifier l'ancien, parce que à mon humble avis, les deux approches sont utiles. Mais cela est très certainement beaucoup plus de "Angularish".
Il y a deux Angularish-2 façons d'obtenir une référence à un modèle de l'élément DOM; ElementRef, et ViewChild. Il y a peut être plus, mais ce sont les deux qui mentionne partout.
ElementRef est probablement préférable d'éviter. Bien entendu, il vous ouvre à de potentielles attaques XSS. Il y a toutes sortes de rouge "méfiez-vous" autour de la documentation.
Alors je me suis rabattue sur quelque chose qui fonctionne vraiment bien, que ViewChild.
Mon template:
Avis que vilain à la recherche #myInput. Il sert comme un IDENTIFIANT, mais pas une plaine ol' DOM id=". Je suppose qu'il vous permet de vous autour de l'Id unique problème, ainsi que le vilain hack de l'étiquetage des éléments vides classes CSS à la place de Id.
Dans votre code: Remarque j'utilise ES6 sans annotations. mais pour obtenir le même effet, vous pouvez utiliser le @ViewChild annotation. C'est bien la doc avais en TS (pas dans l'ES6, il m'a fallu un certain temps pour reconstituer).
Pour info j'ai dû trouver un moyen propre de faire cela parce que je voulais mettre en œuvre un RxJS ruisseau de faire quelques anti-rebond et autres joyeusetés.
Fonctionne comme un charme. Temps que nous avons eu quelque chose comme cela dans Angulaire. JQLite n'a jamais vraiment coupé.
Omg...non, il ne l'est pas. Même pas proche (si c'était qu'ils ne vous embêtez pas avec les autres).
Yip, c'est juste une autre façon de faire le même objet. Le XSS avertissement sont à faire avec la mise à jour/insererting éléments dans le DOM directement via nativeElement méthodes - comme Angulaire de ne pas arriver à l'appliquer 'nettoyage' des opérateurs sur la mise à jour des éléments. C'est un peu survendu si, comme il y a très peu de fois vous devez mettre à jour les DOM fourni par l'utilisateur de HTML. Le Renderer2 et ViewChild/ViewContent systèmes sont assez limitées à de nombreux égards. La plupart des mnp modules/bibliothèques Angulaire document d'accès/de la fenêtre, si vous avez un coup d'oeil à la source
par exemple, github.com/angular/material2/blob/master/src/cdk/overlay/...
Vous remarquerez aussi dans ce lien l'utilisation de _methodName pour leurs méthodes privées, qui est l'une des choses que nous ne sommes pas supposé faire (du style conventions). Différence entre les meilleures pratiques et de praticité:-)
OriginalL'auteur Tim Consolazio