html - Angular - 在另一个组件的输入文本框中设置值

Question

我试图在 HTML 输入文本框中设置值，该文本框是 ComponentA 的一部分， typescript 代码是 ComponentB 的一部分。

从this中得到线索所以我尝试这样做:

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

但这行不通。还有什么我需要注意的吗？

编辑: ID 为"name" 的元素在 ComponentA 中，上面试图操作该元素的代码在 ComponentB 中

Answer 1

如果您尝试从组件 2 设置组件 1 的文本字段的值，那么您必须使用 ngModel，即双向数据绑定(bind)。通过在提供者列表中提供 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**