Łącze do wylogowania w kanciastym 2

Question

Ludzie, Potrzebujesz pomocy w scenariuszu poniżej kątowego zastosowania 2. Mam łącze wylogowania, które musi wywołać metodę w usłudze AuthService.

<li><a [routerLink]="['/logout']"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li> 

metoda AuthService:

//logout 
logout() { 
    this.isUserLoggedin = false; 
} 

Jak to osiągnąć? Nie chcę tworzyć nowego komponentu tylko do wywoływania wylogowania. Doceń swoją pomoc.

Answer 1

Zastanawiam się nad tym samym, ale skończyłem tworząc LogoutComponent z pustym szablonem i przekierowując użytkownika do logowania po tym. Funkcja wylogowywania opartego na przycisku działa, ale chciałem wylogować łącze trasy.

LogoutComponent.ts

@Component({ 
    template: '' 
}) 

export class LogoutComponent implements OnInit { 

    constructor(private _authService: AuthService, private router: Router) {} 

    ngOnInit() { 
    this._authService.logout(); 
    this.router.navigate(['login']); 
    } 

} 

app.routes.ts

{ path: 'logout', component: LogoutComponent} 

Answer 2

Jeśli nie potrzebują składnik, nie trzeba używać jednego. Wystarczy powiązać zdarzenie click z funkcją, która wylogowuje użytkownika i przekierowuje tam, gdzie chcesz. Pamiętaj, przekazując obiekt $ zdarzeń, aby zapobiec zachowanie domyślne:

<li><a href="#" (click)="onClick($event)">(your link content)</a></li> 

A w składniku, który sprawia, że ​​menu:

onClick(event: Event): void { 
    event.preventDefault(); // Prevents browser following the link 
    // Here you can call your service method to logout the user 
    // and then redirect with Router object, for example 
} 

Answer 3

(roztwór do kątowego 2, dla kątowego 4, stosowanie ng-IF/Else)

Zakładając, że linki są wyświetlane na stronie głównej app.component, wykonaj następujące czynności w app.component.ts. To skutecznie wyświetla link Wyloguj gdy użytkownik jest zalogowany, w przeciwnym wypadku wyświetla link login (spowodowane jest związany z obserwowanej zamiast pola statycznego)

public isUserLoggedIn: boolean = false; 

ngOnInit(): void { 
    // Setup a subscription so our variable will know the latest status of login 
    this._authService.isLoggedIn().subscribe(status => this.isUserLoggedIn = status); 
} 

w HTML, użyj tego

<div> 
    <table *ngIf="isUserLoggedIn"> 
     <tr> 
      <td> 
       <a href="#" (click)="logoutClicked($event)" id="logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br 
      /></td> 
     </tr> 
    </table> 

    <table *ngIf="! isUserLoggedIn"> 
     <tr> 
      <td> 
       <a [routerLink]="['/login']" id="login"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a><br 
      /></td> 
     </tr> 
    </table> 
</div> 

Zdarzenie logoutClicked wywoła metodę wylogowywania authService. Aby uniknąć dwukrotnego trafiania tą samą metodą, ngSwitch jest lepszym wyborem, ale jakoś nie jest w stanie sprawić, by działało, chociaż będzie wyglądać jak poniżej:

<div [ngSwitch]="IsUserLoggedIn()"> 
    <a href="#" (click)="logoutClicked($event)" id="logout" *ngSwitchCase="true"> 
     <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br /> 

    <a [routerLink]="['/login']" id="login" *ngSwitchCase="false"> 
     <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a> 

</div> 

Answer 4

Zakładając trasy jest określona w pewnym XComponent wewnątrz ngOnInit można dostać ostatnią część adresu URL jak tak

this.route.url.subscribe(data => { 
    this.authType = data[data.length - 1].path; 
}); 

teraz sprawdzić, czy ta trasa jest wylogowanie i wywołać authService jeśli jest:

if (this.authType === 'logout') { 
    this.authServie.logout(); 
} 

Wszystko to przechodzi w ngOnInit komponentu, który ma zdefiniowaną trasę wylogowania. W ten sposób nie będziesz musiał definiować dodatkowego komponentu wylogowania!