Как оформить активную навигационную ссылку на маршруте в угловом проекте дартс?

Question

Я пытаюсь установить нижнюю границу на активной ссылке навигационного маршрутизатора.Но текст навигации становится скрытым <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;
}

Answer 1

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

Answer 2

Класс, который вы предоставляете, меняет привязку ВЕСЬ на синий фон, высоту или 2 пикселя и располагается в левом нижнем углу.Это, вероятно, не то, что вы хотите.

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

Вы можете установить само ребро границы, чтобы иметь стиль.Или добавьте другой элемент для этого стиля и используйте.

.active span  {
  ...
}

или

.active:after {
  ...
}