Блог

У меня есть страница, на которой есть три кнопки: администратор, студент и выход из системы. Кнопка выхода из системы должна появляться только после изменения пути к /admin или /student и исчезновения кнопок администратора и учащегося. Как использовать routerActiveLink в этой проблеме?

home.html:

 <mat-toolbar color="primary">
    <span class="align-content">Online Library Portal</span>
    <button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>
    <button mat-button routerLink="/studentLogin" routerLinkActive="active" (click)="showPage()">Student</button>
    <button mat-button routerLink="/adminLogin" [routerLinkActive]="['admin']" *ngIf="logout">Logout</button>

</mat-toolbar>
<mat-card-content *ngIf="show">
    <div class="welcome">
        <h1>Welcome to Anitha's Library</h1>
    </div>    <div class="instructions">
        <li>
            If you are an <strong>Admin</strong>, please choose admin option to Login or Register.
        </li>
        <li>
            If you are a <strong>Student</strong>, please choose student option to Login or Register.
        </li>
    </div>

</mat-card-content>
 

главная страница.компонент.ts:

 import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) {}

  show: boolean = true;
  logout: boolean = true;
 
  ngOnInit() {
    this.router.navigate([''])
  }

  showPage() {
    this.show = false;
  }

  if([routerLinkActive]="['admin']"){
    
      this.logout=false;
    

  }

}
 

Я новичок в angular. Правильно ли я его использовал?

 <button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>
 

routerLinkActive="active" Будет добавлен класс .active , если текущий маршрут /adminLogin . Поэтому это нельзя использовать для определения того, нужно ли показывать кнопку выхода из системы или нет. Возможно, вы могли бы добавить класс css display: none , но это не очень хорошая практика. Наиболее подходящим методом является поиск текущего маршрута и использование директивы ngIf, как показано ниже.

главная страница.компонент.ts

 import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) {}

  show: boolean = true;
  showLogout: boolean = false;
 
  ngOnInit() {
    if(this.router.url == '/admin' || this.router.url == '/student' ){
        this.showLogout = true;
    }
    else{
        this.showLogout = false;
    }
  }

  showPage() {
    this.show = false;
  }

}
 

home.component.html

 <mat-toolbar color="primary">
    <span class="align-content">Online Library Portal</span>
    <button mat-button routerLink="/adminLogin" routerLinkActive="active" (click)="showPage()">Admin</button>
    <button mat-button routerLink="/studentLogin" routerLinkActive="active" (click)="showPage()">Student</button>
    <button mat-button routerLink="/adminLogin" [routerLinkActive]="['admin']" *ngIf="showLogout">Logout</button>

</mat-toolbar>
<mat-card-content *ngIf="show">
    <div class="welcome">
        <h1>Welcome to Anitha's Library</h1>
    </div>    <div class="instructions">
        <li>
            If you are an <strong>Admin</strong>, please choose admin option to Login or Register.
        </li>
        <li>
            If you are a <strong>Student</strong>, please choose student option to Login or Register.
        </li>
    </div>

</mat-card-content>