web-dev-qa-db-fra.com

Angular - Valeur de réglage dans la zone de texte de saisie d'un autre composant

J'essaie de définir la valeur dans une zone de saisie HTML qui fait partie de ComponentA à partir du code TypeScript qui fait partie de ComponentB.

Prenant un indice de this SO, j'ai essayé de faire:

(<HTMLInputElement>document.getElementById("name")).value = response.name;

Mais ça ne fonctionne pas. Y a-t-il autre chose dont je dois m'occuper?

EDIT: L'élément avec Id "name" est dans ComponentA et le code ci-dessus qui tente de manipuler cet élément est dans ComponentB

htmlangulartypescripttextbox
6
Jeet Prakash

C'est l'un des cas où une interaction utilisateur sur un composant ComponentA déclenche une mise à jour sur un autre composant ComponentB.

Cet article décrit plusieurs approches, avec exemple de code, sur la manière de transmettre des informations entre composants.

Mon préféré est la troisième approche mentionnée dans cet article, dans laquelle l’un des composants (par exemple, ComponentA) "écoute" les mises à jour qui le concernent, quel que soit le composant (par exemple, ComponentB) via un service entre eux, ce qui entraîne un couplage faible .

Pour plus d'approches, voici un autre link .

0
Jeet Prakash

Si vous essayez de définir la valeur du champ de texte du composant 1 à partir du composant 2, vous devez alors utiliser la méthode ngModelname__, c'est-à-dire une liaison de données à double sens. en fournissant composant2 dans la liste des fournisseurs, vous pouvez accéder à toutes les fonctions et variables de ce composant, vous pouvez ainsi facilement définir votre valeur. comme ça

supposons que ceci soit la propriété de valeur de votre composant 2

name:string = 'Pardeep Jain';

que vous pouvez accéder à ce composant comme this-

<input type="text" [(ngModel)]='name'>
....
constructor(private delete1: Delete){
   this.name = this.delete1.name;
}

Working Example

Également

(<HTMLInputElement>document.getElementById("name")).value = response.name;

est utilisé pour définir la valeur du champ du modèle actuel avec id named as **name**

8
Pardeep Jain