顯示登錄用戶的用戶名（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）

回答

相關問題