typescript - Angular 2+ - Efter lyckad inloggning, ändra min Login-komponent i rubriken till Användarkonto-komponent

Jag bygger en Angular2+-app. Började lära mig Angular för en vecka sedan.

Följande är strukturen -index.html - AppComponent(app-root) - Header Component(header) - Signup Component(signup)

SignupComponent är ett modal.

Efter en lyckad inloggning vill jag ersätta mitt registreringskonto med en användarkomponent (som ska vara en rullgardinsmeny med flera länkar - (Kontolänk, Logga ut-länk) ).

Lösningen som jag tänkte var att vid en lyckad inloggning borde jag sända händelsen till Header-komponenten från Signup-komponenten.

Vid mottagande av händelsen bör Header-komponenten byta till UserComponent och dölja Signup Component Div.

Användarkomponenten bör ha en autentiseringsvakt eftersom länkarna i rullgardinsmenyn bör skyddas.

Jag har några frågor

  • Hur ska jag routa från Signup Modal till index.html med nödvändiga ändringar? - Behöver jag uppdatera index.html där det kommer att ladda account-komponenten? Hur ska jag routa till index.html som ska ha den nya User-komponenten istället för signup-komponenten?

  • Är detta rätt tillvägagångssätt? Om inte, vad är det ideala sättet att göra detta i Angular 2+?

Svar #1

Jag skriver dessa tips för Angular 4.3. För det första vill jag föreslå att du inte lägger din HTML i index.html-filen, det är inte rätt metod. APP-komponenten är huvudkomponenten där du kan lägga all HTML. Nu, förutom headern (login/logout-länkar bör finnas här) och footer, ta bort annan HTML och använd router-outlet för att bygga en enkel-sida-applikation.

Jag antar att du redan har en inloggnings-/SignIn-komponent och en inloggnings-/SignIn-tjänst. Sätt först en variabel i inloggningstjänsten och markera den som falsk i konstruktören. Nu behöver du ändra värdet på denna variabel vid inloggnings- och utloggningsoperationer.

Efter det behöver man kalla login-tjänsten i app-komponenten och initiera den i konstruktorn.

Slutligen i appkomponentens HTML, där du har login/logout-länkar, använd ngIf för att visa/dölja dessa länkar med login service-variabeln.

Min kod ser ungefär ut som nedan.

Inloggningstjänst

export class LoginService{
    isloggedin : boolean;
    constructor(private _http: Http){
        this.isloggedin = false;
    }

Appkomponent HTML

<li *ngIf="!loginService.isloggedin"> <a routerLink="login">Login</a> </li>
<li *ngIf="!loginService.isloggedin"> <a routerLink="register">Register</a> </li>
<li *ngIf="loginService.isloggedin"> <a routerLink="logout">Logout</a> </li>

App-komponent

import { LoginService } from './login.service';

export class AppComponent {
constructor(private loginService: LoginService){
}

Efter utloggning rensar jag helt enkelt localstorage och sätter isloggedin till false;

Svar #2

Ta en titt på Angular-rutter: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Och ngIF-direktivet: https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf

Du kan skapa ett Booleskt värde som ansvarar för att hålla information om vad som ska visas, t.ex. isClientLogged=true/false. Använd sedan ett ngIf-uttryck för att visa vad du vill. Om du vill omdirigera en del av din sida till en annan, använd Angular-rutter.

Relaterade artiklar