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

Question

我试图在HTML输入文本框中设置值,该文本框是ComponentA打字稿代码的一部分,该代码是代码的一部分ComponentB.

从这个 SO中获取线索我尝试做:

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

但这不起作用.还有什么我需要照顾的吗？

编辑:具有Id的元素"name"在ComponentA中,并且试图操纵该元素的上述代码在ComponentB中

Answer 1

如果您尝试从compoenent2设置component1的textfield的值,那么您必须使用ngModelie双向数据绑定.通过在提供者列表中提供component2,您可以访问该组件的所有功能和变量,然后您可以轻松设置您的值.像这样

假设这是你的组件2的value属性

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**

Answer 2

ComponentA这是当一个组件上的用户交互触发另一组件上的更新时的情况之一ComponentB。

本文通过示例代码介绍了有关如何在组件之间传递信息的多种方法。

我个人最喜欢的是该文章中提到的第三种方法，其中一个组件（例如ComponentA）通过它们之间的服务“监听”它所关注的任何组件（例如ComponentB）的更新，从而形成松散耦合的组件。

有关更多方法，请参阅另一个链接。