相关疑难解决方法(0)

如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作.plunker代码显示工作链接和非工作链接.先感谢您.以下是不起作用的链接.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

有问题的Plunker代码

在 Bootstrap 3 导航栏中，当链接处于活动状态时，链接背景颜色会更改以显示其处于活动状态。这似乎在 Bootstrap 4 中缺失。有没有办法显示这一点，或者我是否需要覆盖活动类？

Bootstrap 3 导航栏如下所示。您可以看到活动主页链接已突出显示如何在 Bootstrap 4 中显示此链接。

下面的angular 5代码

  <div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
      </li>
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/page1']" (click)="navbarCollapsed = true">Page 1</a>
      </li>
    </ul>
  </div>