Question

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

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);
}

我没有获得用户名，它在控制台中打印undefined。提供者

没有问题

Answer 1

您可以在login.ts中使用Input()，然后将其注入您的家中：

<强> login.ts

Input() username: any;

然后你可以使用

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

你家里应该有data:any;

更新

如果您想使用服务，您可以创建一个新服务，例如login.service.ts并定义一个新变量username:any;。

现在在你的login.ts

constructor(private _username:LoginService)
{}

submit(){
  this._username.username = this.username;
}

并在你的home.ts构造函数

中

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

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

1 个答案: