根据当前会话值将符号 in/out 按钮添加到侧边栏

Question

如果我的会话值为真，我想将注销添加到此侧边栏。如果 session "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();" 获取当前授权值如果用户已经登录我想显示退出按钮。

Answer 1

在您的模板中使用 *ngIf directive，如果表达式 return 为真，它将向 DOM 添加一个元素，如果表达式 return 则将其从 DOM 中删除] 错误：

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

<button *ngIf="!auth">Sign In</button>

根据当前会话值将符号 in/out 按钮添加到侧边栏

Add sign in/out button to sidebar according to current session value

angular

angular8