在 Angular 9 中折叠侧边栏时如何显示链接文本？答案

【问题标题】：How do I show link text when sidebar is collapsed in Angular 9?在 Angular 9 中折叠侧边栏时如何显示链接文本？
【发布时间】：2020-09-03 08:58:11
【问题描述】：

我知道如果我将 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%'
      })
    }
  }

}

【问题讨论】：

标签： css angular bootstrap-4

【解决方案1】：

Angular 中可以有条件地添加属性，所以只能在侧边栏收起时添加title 属性。

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

isSidebarCollapsed 是您需要在NavigationComponent 中创建的变量，当侧边栏折叠时您需要将其设置为true，否则设置为false。

【讨论】：