如何将输入的数据从一个html文件移动到其ts文件，然后再移动到另一个组件文件？

Question

我生成了两个组件login和主页。我试图将用户输入从登录模板传递到登录组件，然后再通过主页组件传递到主页模板。 我该怎么办 ？

我没有在登录模板文件中的任何组件文件中编写任何代码。 以下是登录模板代码。

<form #loginForm="ngForm">
  <label>Username:</label>
  <input   name="username" ngModel #name="ngModel" required minlength="4" maxlength="10" appForbiddenName="jedii" type="text">
   <div *ngIf="name.touched && !name.valid">
     <div *ngIf="name.errors.required">username is mandatory</div>
     <div *ngIf="name.errors.minlength">username must be of min 4 characters</div>
     <div *ngIf="name.errors.forbiddenName">username cannot be jedii</div>
   </div> 
  <br><br>
  <label>Password:</label>
  <input type="password" name="password" ngModel #password="ngModel">
</form>
<br>
 <button routerLink="/home">Login</button> 
<br>
<br>
<button (click)="loginForm.resetForm()">Clear</button> 

Answer 1

有多种可能的方式来从ts文件中的html访问用户输入数据，并将数据从一个组件传递到另一组件。

要从模板文件访问ts中的数据，可以使用两种不同类型的形式：

1. 模板驱动（ 单击此处了解更多详细信息 ）
2. 反应形式（ 单击此处了解更多详细信息 ）

要将数据从一个组件传递到另一个组件，可能的方法是：（ 单击此处获取更多详细信息 ）

1. 使用输入绑定将数据从父级传递到子级
2. 用设置器截取输入属性的更改
3. 使用ngOnChanges（）拦截输入属性更改
4. 家长听孩子活动
5. 父母通过局部变量与孩子互动
6. 父调用@ViewChild（）
7. 父母与子女通过服务进行沟通

对于您而言，我认为最好的解决方案是使用模板驱动的表单并通过服务进行通信。 休息取决于您的要求。

Answer 2

https://angular.io/guide/component-interaction 。 在这里发布之前，您应该检查角度文档。 您可以在那里找到有关组件之间通信的所有信息。 干杯。