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

Posted 2023-03-13

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

【英文标题】：Angular - Setting value in input text box in another component

【发布时间】：2016-11-16 10:22:48

【问题描述】：

我正在尝试在作为ComponentA 一部分的 html 输入文本框中从作为ComponentB 一部分的打字稿代码设置值。

从this 中获取线索，所以我尝试这样做：

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

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

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

【问题讨论】：

有什么理由不使用ngModel，从而将输入绑定到一个变量？

【参考方案1】：

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

【讨论】：

@pradeep，感谢 ngModel 示例的 plunker，尽管我不希望在声明它的同一位置分配值，而是希望通过 @ 更新输入框987654328@ 通过函数调用。所以我将声明更改为name:string; 并在DeleteFunction() 函数中输入name = "pradeep"; 它应该工作吗？抱歉表现得像个新手，这是我第一次尝试 Angular2

【参考方案2】：

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

This article 通过示例代码描述了如何在组件之间传递信息的多种方法。

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

更多方法在这里是另一个link。