0

我有一个页面，其中有三个按钮，管理员，学生和注销。退出按钮必须仅在路径更改为/adminor后出现/student，并使管理员和学生按钮消失。如何在这个问题中使用 routerActiveLink？

主页.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>

home.component.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;
    

  }

}

我是角度的新手。我是否正确使用了它？

4

1 回答 1

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

如果当前路线是，routerLinkActive="active"则将添加该类。因此，这不能用于确定是否需要显示注销按钮。也许，您可以添加一个 css 类，但这不是一个好习惯。最合适的方法是找到当前路由并使用 ngIf 指令，如下所示。.active/adminLogindisplay: none

home.component.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>
于 2021-07-11T05:34:21.553 回答