显示登录用户的用户名(Angular 2) [英] Display username of user who logs in (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.
这篇关于显示登录用户的用户名(Angular 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
