Добавить кнопку входа / выхода на боковую панель в соответствии с текущим значением сеанса - PullRequest
0 голосов
/ 09 июля 2019

Я хочу добавить выход на эту боковую панель, если мое значение сеанса истинно. И выйдите, если значение сеанса "auth" равно false.

Это мой код sidebar.component.ts.

import { AlertService } from './../../services/alerts';
import { Component, OnInit } from '@angular/core';
import { SessionService } from 'app/services/session';

declare interface RouteInfo {
  path: string;
  title: string;
  icon: string;
  class: string;
  id: string;
}
export const ROUTES: RouteInfo[] = [
  { path: '/dashboard', id: 'dashboard', title: 'Dashboard', icon: 'dashboard', class: '' },
  { path: '/mostpopular', id: 'mostpopular', title: 'Most Popular Poems', icon: 'content_paste', class: '' },
  { path: '/poet', id: 'poet', title: 'Poets', icon: 'library_books', class: '' },
  { path: '/notifications', id: 'notification', title: 'Notifications', icon: 'notifications', class: '' },
  { path: '/user-profile', id: 'user', title: 'User Profile', icon: 'person', class: '' },
  { path: '/writepoem', id: 'writepoem', title: 'Write a Poem', icon: 'bubble_chart', class: 'sidebarunique' },   
];

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
   menuItems: any[];
   constructor(private session: SessionService) { }
  ngOnInit() {
    this.menuItems = ROUTES.filter(menuItem => menuItem);

   var auth =  this.session.getAuth();

   /*
      Need to add sign in/out button according to the 'auth' value

    */
  }

}

Я могу получить текущее значение аутентификации, используя "this.session.getAuth ();" Если пользователь уже выполнил вход, я хочу отобразить кнопку выхода.

1 Ответ

1 голос
/ 09 июля 2019

Используйте *ngIf директиву в вашем шаблоне, она добавляет элемент в DOM, если выражение возвращает true, и удаляет его из DOM, если выражение возвращает false:

<button *ngIf="auth">Sign Out</button>

<button *ngIf="!auth">Sign In</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...