Angulaire 2 de la Composante d'Accès DOM (ou créer un Composant sans modèle, purement JS)
Essayer de jouer avec Angulaire 2 ici... compris qu'il est encore en alpha.
Comment puis-je accéder à des éléments du DOM à partir de Composant? Plus précisément, je tiens à utiliser d'autres bibliothèques comme d3 de générer personnalisées DOM à partir de code. Je suppose que j'ai besoin de créer un composant et en quelque sorte de bouchon dans la composante de la vie-cercle de modifier le DOM avec d3... une idée de par où commencer à creuser?
Je suis en utilisant ce démarrage rapide repo.
Merci!
Vous devez vous connecter pour publier un commentaire.
Si vous n'avez pas l'esprit à l'aide de la Directive au lieu de Composant, il est simple. Angulaire 2.0.0-alpha.33 dans la machine vous pouvez utiliser D3 pour manipuler le DOM par Injection d'une ElementRef:
Utilisation ElementRef
ElementRef va injecter de l'actuel nœud DOM dans votre composant. Le ElementRef service sera toujours local à votre nœud DOM.
Avoir injecté, vous pouvez vous procurer de la DOM nœud à l'aide de nativeElement:
Une fois que vous avez cela, vous pouvez le manipuler de quelque manière que vous aimez, que ce soit à l'aide de scripts DOM, ou à l'aide d'un DOM wrapper comme jQuery:
Mais ne pas le faire si vous pouvez l'aider
Être conscients que, comme avec Angulaire 1, l'utilisation directe de manipulation du DOM est découragé. Vous pouvez obtenir à peu près tous de votre travail effectué à l'aide de modèles, et vous devriez en faveur de cette façon de travailler la plupart du temps.
Direct de manipulation du DOM conduit à compliqué, difficile à comprendre, difficile à un code de test.
Il y a des moments, quand il peut sembler comme la meilleure solution. Par exemple, si vous avez à intégrer à un tiers, de haute complexité cadre comme une bibliothèque graphique.
Voici un exemple (dans l'ES6)
Note: [Obsolète]
Vous pouvez utiliser "BrowserDomAdapter"
https://angular.io/docs/ts/latest/api/platform/browser/BrowserDomAdapter-class.html
Processus de
Que d'autres affiches ont mentionné: vous pouvez manipuler le DOM par l'injection de
ElementRef
dans la directive. Cependant, examiner attentivement si vous avez vraiment besoin pour ce faire.D3 est un outil de manipulation du DOM. Il vous permet de lier un objet de données à un nœud DOM, puis ajouter ou supprimer des éléments enfants de l'élément en réponse à l'évolution des valeurs de données. C'est à peu près exactement ce Angulaire 2 ne.
Bien sûr, D3 fait d'autres choses aussi. Vous pouvez générer des angles d'un graphique à secteurs, ou une distribution normale par exemple, et vous pouvez les utiliser D3 pour cela.
Je sais que ce n'est pas la réponse que vous cherchez. Ce n'est pas la réponse que je cherchais, mais... Examiner attentivement si vous avez besoin d'utiliser D3 pour la manipulation du DOM et de la liaison de données. Angulaire 2 a déjà de manipulation du DOM et de la liaison de données.
Cette doc (http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2) mentionne " le décorateur au style des directives qui, je crois, sont décrits avec un peu plus de détails et un exemple de base ici (https://angular.io/api/core/Directive).