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

Question

Here's my code, I want to send username input value from login component to home component.I want my username to be updated in constructor so that i can access it in home page. How do I assign updated username in constructor?

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

I don't get username, it prints undefined in console. There is no problem with provider

Answer 1

You can use Input() in your login.ts and then inject it to your home like this:

login.ts

Input() username: any;

and then you can use

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

you should have data:any; in your home.ts

UPDATE

If you want to use service, you can create a new service for example login.service.ts and define a new variable username:any; .

now in your login.ts

constructor(private _username:LoginService)
{}

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

and in your home.ts constructor

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