Angular SPA应用程序使其他URL仍然具有基于URL编号的突出显示导航栏部分

Angular SPA application make other URL to still have highlight Nav bar section based on URL number

本文关键字：URL 编号 显示 栏部 导航 应用程序 SPA 其他 Angular      更新时间：2023-09-26

>我有一个 Angular SPA 应用程序，其中完成了主路由导航，我让它突出显示正确的标题。

但是，当单击页面上的特定链接时，我现在需要将其突出显示为活动，我将知道该特定URL包含" 5">

当前如果此网址被命中

http://srpdop03/doc-home/#/coordinators

然后我用白色突出显示导航栏背景 

<li ng-class="{ active: isActive('/coordinators')}"><a href="#/coordinators">Coordinators</a></li>

因此，在该协调器页面上，当我单击新闻链接时，新URL是

http://srpdop03/doc-home/#/tips/5?paginatePage=1

因此，在此索引中.html SPA应用程序 ，有没有办法轻松读取URL，并查看URL的这一特定部分 

 /tips/5

然后使 SAME - 协调员导航"活跃"？

索引中的 ng 控制器代码.html目前如下所示

<div ng-controller="TopNavCtrl" class="navbar">
<div class="container">
  <ul class="nav">
    <li ng-class="{ active: isActive('/')}"><a href="#/">DOC</a></li>
    <li ng-class="{ active: isActive('/supervisors')}" ng-if="user.groups.DOC_SUPERVISORS || user.groups.DOC_BACKUP_SUPERVISORS">
        <a href="#/supervisors">Supervisors</a>
    </li>
    <li ng-class="{ active: isActive('/dispatchers')}"><a href="#/dispatchers">Dispatchers</a></li>
    <li ng-class="{ active: isActive('/coordinators')}"><a href="#/coordinators">Coordinators</a></li>
    <li ng-class="{ active: isActive('/reliability')}"><a href="#/reliability">Reliability</a></li>
    <li ng-class="{ active: isActive('/specialists')}"><a href="#/specialists">Specialists</a></li>
    <li ng-class="{ active: isActive('/mapping')}"><a href="#/mapping">Mapping</a></li>
    <li ng-class="{ active: isActive('/techs')}"><a href="#/techs">Cap Techs</a></li>
    <!--<li ng-class="{ active: isActive('/applications')}"><a href="#/applications">BOA</a></li>-->
    <li ng-class="{ active: isActive('/boa')}"><a href="#/boa">BOA</a></li>
  </ul>
  <ul class="nav-right">
    <li ng-class="{ active: isActive('/user')}" ng-show="isAdmin()">
        <a href="#/user"><b>{{ user.ntid }}</b></a>
    </li>
    <li ng-class="{ active: isActive('/')}" ng-show="!isAdmin()">
        <a href="#/"><b>{{ user.ntid }}</b></a>
    </li>
    <!--<li>{{info.host}}</li>-->
  </ul>
</div>

然后在app.js 

app.controller('TopNavCtrl', function ($scope, $http, UserService,  $location) {
$http.get('api/env')
.success(function (info) {
  $scope.info = info;
  UserService.get(function (err, user) {
    $scope.user = user;
    $scope.isActive = function (viewLocation) {
        var active = (viewLocation === $location.path());
        //var active = $location.path().indexOf(viewLocation) == 0;  
        return active;
    };
    $scope.isAdmin = function () {
      return user.groups.WEB_ESO ||
             info.env === 'development'
    };
  });
});

}(;

我正在看这篇文章http://webdesignerhut.com/active-class-navigation-menu/

这是jquery代码，我不确定如何改造自定义lastIndexOf等。 

$(function() {
 var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
 $("#nav ul li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })
 });

添加 ui-router 作为依赖项。

UI-router特别擅长在导航菜单中显示活动状态。正如这里所记录的那样，ui 路由器的 ui-sref-active 有一个"主要用例是简化依赖 ui-sref 的导航菜单的特殊外观，通过让"活动"状态的菜单按钮看起来不同，将其与非活动菜单项区分开来。

在您的情况下，我会考虑做这样的事情：

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,
$urlRouterProvider,){
 add your routes here:
}]);

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'anyone'})" href="/users/anyone">anyone</a>
  </li>
</ul>
相关文章：