Question

我的网站上有一个NavBarComponent。对于网站中的每个页面，都有一个完全相同的NavBarComponent的新实例。

因此，当我单击navBarComponent中的链接时，它会转到该页面，但由于该页面有一个新的navBarComponent，因此NavBar中的相应链接不活动。我需要它活跃。

以下是一些显示我的意思的图片：

主页：

点击“查找”并在新页面中无效：

再次点击查找，因为它是同一个页面所以相同的NavigationBar，它现在处于活动状态。

首次点击“查找”链接时，“查找”链接是否处于有效状态的最佳方法是什么？

这是navBarComponent的代码，它在所有网页之间共享：

HTML模板：

<nav class="navbar navbar-dark navbar-fixed-top text-uppercase">
    <div class="container-fluid">
        <button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content">
                    &#9776;
        </button>
        <a class="navbar-brand" [routerLink]="['/']" routerLinkActive="active">the vegan repository</a>
        <div class="collapse navbar-toggleable-sm" id="nav-content">
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/find']" routerLinkActive="active">find</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/add']" routerLinkActive="active">add</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">sign up free</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<router-outlet></router-outlet>

css模板：

.navbar-toggler {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #FFF; }

nav {
  background-color: #fc4747; }

a {
  cursor: pointer; }

typescript组件：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/navbar.component.html',
    styleUrls: ['app/shared/navbar.component.css'],
    directives: [ROUTER_DIRECTIVES]
})
export class NavbarComponent { }

导航到新页面时，路由器链接未设置为活动状态 - Angular 2

0 个答案: