显示登录用户的用户名（Angular 2）

这似乎是一个非常简单的问题，但我是Angular2的新手，我对组件之间的关系有点困惑。我有一个登录页面，当用户输入他们的用户名时，我想要在仪表板上显示用户名，例如“Welcome，James”。显示登录用户的用户名（Angular 2）

我有一个login.html页面，loginHTMLcomponent有一个templateurl到login.html页面及其父login.ts。我有dashboard.ts这是dashboard.component.ts父母这（对仪表盘页面的HTML）

基本上我如何才能从输入字段的用户名中的login.html出现在dashboard.component.html ...我可能已经很好地解释过了。谢谢。

我会尽力解释更清楚一点在我的login.html我有类似：

input type = "text" [(ngModel="name")]

而且在我dashboard.component.ts，在里面我的选择我会：

@Component({ 
    selector: 'dashboardHTML', 
    template: 
    ` 
    <body> 
     ........ 
     .......... 
     <span ="user">Welcome, {{user}}</span> 
     ... 
     `

更新：只是想知道是接近使用服务的正确方法。在我login.component.html我：

<input id="username" type="text" class="form-control" 
placeholder="Username" ngControl="username" [(ngModel)]="name">

在我login.HTMLComponent（其中有一个templateURL到login.component.html）我有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; 
      } 
}

我米不知道我是否在这里正确调用名称。谢谢

来源

2016-07-29 Edmond

在你的情况下，服务可能是不错的选择。将登录数据存储在服务中，并从任何需要数据的组件访问它。用@Injectable()装饰服务，然后将其注入到组件中。

来源

2016-07-29 13:53:31 hholtij

非常感谢您的帮助 – Edmond

我投的好，但我没有足够的帖子来显示，如果你有机会，你能看看我对我的帖子所做的修改吗？谢谢 – Edmond

而不是试图将login component的用户名传递给dashboard component，而应该通过普通的service获得。用户名可能是后端响应的一部分，用于登录用户。该响应（即登录用户）存储在服务中，可以将其注入到每个组件中。

服务通常是在不在父/子层次结构内的组件之间交换数据的好主意。

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

关于你的服务

服务不应该的LoginHTMLComponent或任何其他组件的引用。注入NameService在LoginComponent（和DashboardComponent）的构造类似这样的

private constructor(private nameService:NameService) {...}

，当然，进口NameService。

来源

2016-07-29 13:54:45 Matt

太好了，谢谢你 – Edmond

不客气。如果这对你有帮助，别忘了投票。 – Matt

我投的好，但我没有足够的帖子显示，如果你有机会，你能看看我对我的帖子所做的修改吗？谢谢 – Edmond

显示登录用户的用户名（Angular 2）

回答

相关问题