显示登录用户的用户名(Angular 2)
这似乎是一个非常简单的问题,但是我是Angular2的新手,我对组件之间的关系有些困惑.我有一个登录页面,当用户输入用户名时,我希望用户名显示在仪表板上,例如"Welcome,James".
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".
我有一个login.html
页面,一个loginHTMLcomponent
对login.html
页面具有templateurl
,其上级是login.ts.
我有dashboard.ts
,它是dashboard.component.ts
的父级,而dashboard.component.ts
(具有仪表板页面的HTML)
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)
基本上,我如何从login.html的输入字段中获取用户名,以显示在dashboard.component.html中.谢谢.
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.
我会解释得更清楚一点 在我的login.html中,我有类似的内容:
I'll try explain it a bit clearer In my login.html I have something like:
input type = "text" [(ngModel="name")]
在我的dashboard.component.ts中,在选择器中,我将拥有:
And in my dashboard.component.ts, inside in my selector I would have:
@Component({
selector: 'dashboardHTML',
template:
`
<body>
........
..........
<span ="user">Welcome, {{user}}</span>
...
`
更新:
只是想知道是使用服务的正确方法.
在我的login.component.html
中,我有:
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">
在我的login.HTMLComponent
(具有指向login.component.html
的templateURL)中,我有export class LoginHTMLComponent{
public name: {};
/////
In my login.HTMLComponent
(which has a templateURL to login.component.html
) I have export class LoginHTMLComponent{
public name: {};
/////
在我的name.service.ts
中,我有这个
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
您应该尝试通过通用的service
而不是将用户名从login component
传递给dashboard component
.用户名可能是来自登录您的用户的后端响应的一部分.该响应(即登录的用户)存储在服务中,可以注入到您的每个组件中.
Instead of trying to pass the username from the login component
to the dashboard component
, you should obtain it rather via a common service
. 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
关于您的服务
该服务不应引用LoginHTMLComponent
或任何其他组件.像这样将NameService
注入到LoginComponent
(和DashboardComponent
)的构造函数中
The service should not have a reference to the LoginHTMLComponent
or any other component. Inject the NameService
in the constructor of your LoginComponent
(and DashboardComponent
) like this
private constructor(private nameService:NameService) {...}
,当然还要导入NameService
.