Benutzernamen des Benutzers anzeigen, der sich anmeldet (Angular 2)

Question

Das scheint eine sehr einfache Frage zu sein, aber ich bin neu in Angular2 und bin etwas verwirrt über die Beziehung zwischen den Komponenten. Ich habe eine Login-Seite und wenn der Nutzer seinen Nutzernamen eingibt, möchte ich, dass der Benutzername auf dem Dashboard angezeigt wird, etwa "Willkommen, James".

Ich habe eine login.html Seite, ein loginHTMLcomponent, die ein templateurl zur login.html Seite und deren Eltern hat, die login.ts. I dashboard.ts haben, das ist ein Elternteil von dashboard.component.ts, die (das HTML für die Dashboard-Seite hat)

Im Grunde wie kann ich den Benutzernamen aus dem Eingabefeld in login.html in dashboard.component.html zu erscheinen bekommen ... Ich habe das wahrscheinlich schrecklich erklärt. Vielen Dank.

Ich werde versuchen, erklärt es ein bisschen klarer In meinem login.html Ich habe so etwas wie:

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

Und in meinem dashboard.component.ts, innen in meinem Wähler hätte ich:

Update: Nur wundern ist der richtige Weg in der Annäherung mit einem Service. In meinem login.component.html ich habe:

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

In meinem login.HTMLComponent (die eine templateURL zu login.component.html hat) Ich export class LoginHTMLComponent{ public name: {}; ///// haben

Und in meinem name.service.ts Ich habe diese

import { Injectable } from '@angular/core'; 
import {LoginHTMLComponent} from "./LoginComponents/login.HTMLcomponent"; 
@Injectable() 
export class NameService { 
    getName(){ 
     return name; 
      } 
} 

I‘ Ich bin mir nicht sicher, ob ich den Namen hier richtig rufe. Danke

Answer 1

In Ihrem Fall könnte ein Service eine gute Option sein. Speichern Sie die Anmeldedaten im Service und greifen Sie auf die Daten zu, von denen die Komponente benötigt wird. Dekorieren Sie den Service mit @Injectable() und injizieren Sie ihn dann in Ihre Komponenten.

Answer 2

Anstatt zu versuchen, den Benutzernamen von der login component an die dashboard component übergeben, sollten Sie es lieber über eine gemeinsame service erhalten. Der Benutzername ist wahrscheinlich Teil der Antwort vom Backend, die Ihren Benutzer anmeldet. Diese Antwort, d. H. Der angemeldete Benutzer, wird in einem Dienst gespeichert, der in jede Ihrer Komponenten eingefügt werden kann.

Dienste sind oft eine gute Idee, um Daten zwischen Komponenten auszutauschen, die sich nicht in einer übergeordneten/untergeordneten Hierarchie befinden.

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

In Bezug auf Ihren Service

Der Dienst sollte nicht einen Verweis auf die LoginHTMLComponent oder einer anderen Komponente.Injizieren Sie die NameService im Konstruktor Ihrer LoginComponent (und DashboardComponent) wie dieses

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

und natürlich, importieren Sie die NameService.