web-dev-qa-db-ja.com

Angular-別のコンポーネントの入力テキストボックスに値を設定

ComponentAの一部であるTypeScriptコードからComponentBの一部であるHTML入力テキストボックスに値を設定しようとしています。

this SOから手がかりを取得してみました：

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

しかし、これは機能していません。私が世話をする必要がある他のものはありますか？

EDIT：Id "name"はComponentAにあり、その要素を操作しようとしている上記のコードはComponentBにあります

htmlangulartypescripttextbox
8
Jeet Prakash

これは、あるコンポーネントComponentAでのユーザーインタラクションが別のコンポーネントComponentBで更新をトリガーする場合の1つです。

この記事 は、コンポーネント間で情報を渡す方法に関するコード例を使用した複数のアプローチについて説明しています。

私の個人的なお気に入りは、その記事で言及されている3番目のアプローチで、コンポーネント（たとえばComponentA）の1つがサービスを介して任意のコンポーネント（たとえばComponentB）から更新を「リッスン」しますそれらの間に、疎結合されたコンポーネントをもたらします。

他のアプローチについては、別の link を使用してください。

1
Jeet Prakash

コンポーネント1のテキストフィールドの値をコンポーネント2から設定しようとしている場合は、ngModelを使用する必要があります。つまり、双方向のデータバインディングが必要です。プロバイダーリストにcomponent2を指定すると、そのコンポーネントのすべての関数と変数にアクセスでき、値を簡単に設定できます。このような

これがコンポーネント2の値プロパティであるとします

name:string = 'Pardeep Jain';

このようなコンポーネントでこれにアクセスできるよりも、

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

Working Example

また

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

id named as **name**で現在のテンプレートのフィールドの値を設定するために使用されます

13
Pardeep Jain