{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Explosion°爆炸 的问题《Display username of user who logs in (Angular 2)》','https://www.manongdao.com/q-1110262.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This seems like a very simple question but I'm new to Angular2 and I'm a bit confused by the relationship between components. I have a login page and when the user enters their username, I want the username to display on the dashboard, something like "Welcome, James".
I have a login.html page, a loginHTMLcomponent that has a templateurl to the login.html page and its parent which login.ts.
I have dashboard.ts which is a parent of dashboard.component.ts which (has the HTML for the dashboard page)
Basically how do I get the username from the input field in login.html to appear in dashboard.component.html...I've probably explained this awfully. Thanks.
I'll try explain it a bit clearer In my login.html I have something like:
input type = "text" [(ngModel="name")]
And in my dashboard.component.ts, inside in my selector I would have:
@Component({
selector: 'dashboardHTML',
template:
`
<body>
........
..........
<span ="user">Welcome, {{user}}</span>
...
`
Update:
Just wondering is the correct way in approaching using a service.
In my login.component.html I have:
<input id="username" type="text" class="form-control"
placeholder="Username" ngControl="username" [(ngModel)]="name">
In my login.HTMLComponent(which has a templateURL to login.component.html) I have export class LoginHTMLComponent{
public name: {};
/////
And in my name.service.ts I have this
import { Injectable } from '@angular/core';
import {LoginHTMLComponent} from "./LoginComponents/login.HTMLcomponent";
@Injectable()
export class NameService {
getName(){
return name;
}
}
I'm not sure if I'm calling name correctly here. Thanks
In your case a service might be good option. Store the login data in the service and access it from whichever component needs the data. Decorate the service with
@Injectable()and then inject it into your components.Instead of trying to pass the username from the
login componentto thedashboard component, you should obtain it rather via a commonservice. The username is probably part of the response from the backend that logs your user in. That response, i.e. the logged-in user, is stored in a service, that can be injected into each of your components.Services are often a good idea to exchange data between components that are not within a parent/child hierarchy.
https://angular.io/docs/ts/latest/tutorial/toh-pt4.html
Regarding your service
The service should not have a reference to the
LoginHTMLComponentor any other component. Inject theNameServicein the constructor of yourLoginComponent(andDashboardComponent) like thisand, of course, import the
NameService.