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

Question

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

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

<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. 模板驱动 ( Click here for more details )
2. 响应式表单 ( Click here for more details )

要将数据从一个组件传递到另一个组件，可能的方法有:( Click here for more details )

1. 通过输入绑定(bind)将数据从父级传递给子级
2. 使用 setter 拦截输入属性更改
3. 使用 ngOnChanges() 拦截输入属性更改
4. 父级监听子级事件
5. 父级通过局部变量与子级交互
6. 父级调用@ViewChild()
7. 家长和 child 通过服务进行交流

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