Выйти из категории угловой 2

Question

Люди, Нужна помощь в сценарии с приложением ниже углового 2. У меня есть ссылка на выход, которая должна вызывать метод в AuthService.

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

метод AuthService:

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

Как этого добиться? Я не хочу создавать еще один компонент только для вызова выхода из системы. Цените свою помощь.

Answer 1

Мне было интересно то же самое, но в итоге я создал LogoutComponent с пустым шаблоном и перенаправил пользователя для входа в систему после этого. Функциональность выхода на основе кнопок работает, но мне нужна ссылка маршрута выхода из системы.

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

Если вам не нужен компонент, вы не должны использовать один. Просто привяжите событие click к функции, которая выводит пользователя из системы и перенаправляет туда, где вы хотите. Помните, передавая объект $ событий для того, чтобы предотвратить поведение по умолчанию:

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

И в компоненте, который делает это меню:

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

(раствор для угловых 2, для углового 4, использование нг-If/Else)

Предполагая, что ссылки отображаются на главной странице app.component, выполните следующие действия в app.component.ts. Это успешно отображает ссылку Выход, если пользователь авторизован, иначе отображает ссылку Войти (из-за привязки с наблюдаемом, а не статическое поле)

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); 
} 

В HTML, используйте этот

<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> 

Событие logoutClicked будет вызывать метод выхода из системы authService

Чтобы избежать двойного использования одного и того же метода дважды, ngSwitch - лучший выбор, но как-то не в состоянии заставить его работать, хотя будет выглядеть так:

<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

Предположим, что ваш маршрут определяется в некоторой XComponent, внутри ngOnInit вы можете получить последнюю часть URL, как так

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

Теперь проверьте, если этот маршрут выхода из системы и вызвать authService, если является:

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

Все, что входит в ngOnInit компонента, который имеет маршрут выхода из определенного. Таким образом, вам не нужно будет определять дополнительный компонент «Выход»!