如何在angular2中的组件之间传递用户输入数据？

这是我的代码，我想将用户名输入值从登录组件发送到主组件。我想在构造函数中更新我的用户名，以便在主页中访问它。如何在构造函数中分配更新的用户名

login.ts

import {Component, Input,Injectable } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'fountain-tech',
  template: require('./login.html')
})

@Injectable()
export class loginComponent {
       username :any;
constructor(){
this.username  =  username;
}
buttonName:string;

home.ts

import {loginComponent} from '../login/login'

@Component({
  selector: 'fountain-tech',
  template: require('./home.html')
})
export class HomeComponent {

constructor(public login:loginComponent){
 console.log(this.login.username);
}

我没有用户名，它在控制台中打印未定义。提供程序没有问题

您可以在login.ts中使用

Input（）

，然后将其注入您的家中，如下所示：

login.ts

Input() username: any;

然后你可以使用

<app-home [data]="username"></app-home>

在你的家里

constructor(private _username:LoginService)
{
  myUsername = this._username.username
}

您可以在login.ts中使用

Input（）

，然后将其注入您的家中，如下所示：

login.ts

Input() username: any;

然后你可以使用

<app-home [data]="username"></app-home>

在你的家里

constructor(private _username:LoginService)
{
  myUsername = this._username.username
}

---

loginComponent和HomeComponent有何关联？他们是兄弟姐妹，父母/孩子，没有特殊关系吗？请添加标记，显示您如何以及在何处使用它们。我猜您也在使用

爱奥尼亚框架。不是吗？不，我没有使用ionic。通常正确的方法是在
登录组件
内成功登录后，将
用户名
（以及可能从
身份验证服务
返回的
令牌
（如果您有）保存在cookie或浏览器的本地存储中。之后，只要未清除存储，您就可以随时从
HomeComponent
的构造函数内的存储或任何其他组件中检索
用户名。是的，它与本地存储一起工作，它跳过了使用服务和DI的部分。loginComponent和HomeComponent是如何相关的？他们是兄弟姐妹，父母/孩子，没有特殊关系吗？请添加标记，显示您如何以及在何处使用它们。我猜您也在使用
爱奥尼亚框架。不是吗？不，我没有使用ionic。通常正确的方法是在
登录组件
内成功登录后，将
用户名
（以及可能从
身份验证服务
返回的
令牌
（如果您有）保存在cookie或浏览器的本地存储中。之后，您可以随时从
HomeComponent
的构造函数中的存储中检索
用户名
，或者任何其他组件，只要存储未被清除。是的，它与本地存储一起工作，它跳过了使用服务和DI的部分。@omkar您可以使用服务来执行此操作，因此，当您在login.ts中设置用户名时，用户名将在服务中更新，当您在home.ts中时，您将在更新后从服务中获得值谢谢回复，我尝试了本地存储，效果很好。我也将尝试您的解决方案并恢复soon@omkar您可以使用服务来执行此操作，因此，当您在login.ts中设置用户名时，用户名将在服务中更新，当您在home.ts中时，您将在更新后从服务中获得值谢谢回复，我尝试了本地存储，效果很好。我也将尝试您的解决方案，并很快恢复