如何在角度飞镖项目中设置路线上的活动导航链接？答案

【问题标题】：How to style active navigation link on route in an angular dart project?如何在角度飞镖项目中设置路线上的活动导航链接？
【发布时间】：2019-05-17 01:25:21
【问题描述】：

我正在尝试在导航路由器的活动链接上实现边框底部。但是点击菜单项时导航文本会隐藏<a>Link 1</a>。

看看问题中的图片。

app_component.html

<div class="material-content">
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">YOUR TITLE</span>
            <div class="material-spacer"></div>
        </div>
        <div class="border-bottom"></div>
        <div class="header-nav">
            <div class="material-header-row">
                <nav class="material-navigation">
                    <a [routerLink]="RoutePaths.name.toUrl()"
                       [routerLinkActive]="'active'">Link 1</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 2</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 3</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 4</a>
                </nav>
                <nav class="material-navigation">
                    <a>Link 5</a>
                </nav>
            </div>
        </div>
    </header>
    <router-outlet [routes]="Routes.all"></router-outlet>
</div>

app_component.css

.active {
  background: #039be5;
  height: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
}

【问题讨论】：

标签： dart angular-dart dart-html

【解决方案1】：

您提供的课程将整个锚点更改为蓝色背景、高度或 2px，并位于左下角。这可能不是你想要的。

.active {
  background: #039be5;
  height: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
}

您可以将边框底部本身设置为具有样式。或者为这种样式添加另一个元素并使用。

.active span  {
  ...
}

或

.active:after {
  ...
}

【讨论】：

【解决方案2】：

.active a {
  border-bottom: 2px solid;
  border-bottom-color: $mat-blue;
  padding-bottom: $mat-grid *2;
}

【讨论】：