當側邊欄在 Angular 9 中折疊時如何顯示鏈接文本？

Question

我知道如果我將 title="link name" 放入錨標記中，就會顯示描述或標題。 但我只希望它在導航欄折疊時顯示。

在 html 文件中，我有更多鏈接，但為了節省空間，我選擇顯示其余鏈接。

.html 模板

<nav class="navbar-default navbar-static-side" role="navigation">
  <div class="sidebar-collapse">
    <ul class="nav nav-sb metismenu" id="side-menu">
      <li class="nav-header" style="padding-top: 0px; padding-bottom: 0px;">
        <div (click)="handleClick($event)">
          <div class="profile-element" style="text-align: center;">
            <img alt="image" style="max-width: 100%; max-height: 60px; text-align: center;" src="assets/images/nieto.jpg">
          </div>
          <div class="logo-element" style="text-align: center; color: #384C65">
            SMS
          </div>
        </div>
      </li>
      <li class="nav-item mt-3" [ngClass]="{active: activeRoute('ReleaseNotes')}">
        <a class="nav-link" title="ReleaseNotes" [routerLink]="['/ReleaseNotes']" style="color:#faec4c;">
          <fa-icon style="padding-right: 5px;" [icon]="faExclamationTriangle"></fa-icon><span class="nav-label">&nbsp;&nbsp;Release notes</span>
        </a>
      </li>
      <li class="nav-item" [ngClass]="{active: activeRoute('Dashboard')}">
        <a class="nav-link" [routerLink]="['/Dashboard']" style="color:greenyellow;">
          <fa-icon  style="padding-right: 5px;" [icon]="faChartLine"></fa-icon><span class="nav-label">&nbsp;&nbsp;Dashboard</span>
        </a>
      </li>
      <li class="nav-item" [ngClass]="{active: activeRoute('Agreements')}"  *ngIf="globals.userHasAgreementAccess()">
        <a class="nav-link" [routerLink]="['/Agreements']"><fa-icon [icon]="faFileSignature"></fa-icon><span class="nav-label">&nbsp;&nbsp;Agreements</span></a>
      </li>
      <li class="nav-item" [ngClass]="{active: activeRoute('Appointments')}">
        <a class="nav-link" [routerLink]="['/Appointments']"><fa-icon [icon]="faUsersCog"></fa-icon><span class="nav-label">&nbsp;&nbsp;Appointments</span></a>
      </li>
      <li class="nav-item" [ngClass]="{active: activeRoute('Attachments')}">
        <a class="nav-link" [routerLink]="['/Attachments']"><fa-icon [icon]="faPaperclip"></fa-icon><span class="nav-label">&nbsp;&nbsp;Attachments</span></a>
      </li>

我還將 ts 文件縮短了幾行，以節省顯示相關信息的空間。

.ts 文件

import { Component } from '@angular/core';
import {Router} from '@angular/router';
import { GlobalsService } from 'src/app/app.globals.service';
import { faUsersCog, faUser, faCalendarCheck, faChartLine, faAlignJustify,faToolbox, faFileInvoiceDollar, faFileSignature, faPaperclip, faShoppingCart, faExclamationTriangle, faBug} from '@fortawesome/free-solid-svg-icons';

declare var jQuery:any;

@Component({
  selector: 'navigation',
  templateUrl: 'navigation.template.html',
})

export class NavigationComponent {
  faUsersCog=faUsersCog; faUser=faUser;faCalendarCheck=faCalendarCheck;faChartLine=faChartLine;faAlignJustify=faAlignJustify;faToolbox=faToolbox; faShoppingCart=faShoppingCart;
  faFileInvoiceDollar=faFileInvoiceDollar;faFileSignature=faFileSignature; faPaperclip=faPaperclip; faExclamationTriangle=faExclamationTriangle; faBug=faBug;
  constructor(public globals: GlobalsService,private router: Router) {}

  ngAfterViewInit() {
    jQuery('#side-menu').metisMenu();

    if (jQuery("body").hasClass('fixed-sidebar')) {
      jQuery('.sidebar-collapse').slimscroll({
        height: '100%'
      })
    }
  }

}

Answer 1

您可以在 Angular 中有條件地添加屬性，因此您只能在側邊欄折疊時添加title屬性。

<a class="nav-link" [attr.title]="isSidebarCollapsed ? 'Release Notes' : null">
  Release notes
</a>

isSidebarCollapsed是一個變量，您需要在NavigationComponent中創建該變量，當側邊欄折疊時，您需要將其設置為true ，否則設置為false 。