angularjs - 新的 Angular 1 组件路由器 - 突出显示与活动路由关联的链接

Question

我有一个带有两个链接的导航栏：

<nav>
  <a ng-link="['Route1']">Route 1</a>
  <a ng-link="['Route2']">Route 2</a>
</nav>

我想突出显示与活动路线关联的链接。本质上，我想添加一个名为router-link-active上述两个链接之一的类。对于新的 Angular 1 组件路由器，最简单的方法是什么？

Answer 1

更新：

Angular 1 的 ComponentRouter 现在已弃用。对于使用 Angular 1.5 组件，建议使用著名的 ui-router。

---

Angular 1 Component Router 自动将ng-link-active类添加到 active ng-links。

如果您的版本没有自动添加它，则您可能使用的是组件路由器的过时版本。我一直在使用这个版本，它是更新的版本，而不是文档中所述的版本（即 0.2.0）。

让我们希望他们尽快将其投入生产。

Answer 2

我不想发布“非官方”版本，所以我创建了自己的指令来添加 ng-link-active（见下文）。

笔记：

1. 您需要确保路线中的“路径”和“名称”属性相同（“/”、“：”和大写除外）-我​​不喜欢这个限制，但对我来说没关系，直到发布了一个固定版本。

2. 这是在 ES6 中，但即使您在 ES5 中编写代码也应该足够清楚。

   export const isActive =
   /*@ngInject*/
   function ($location) {
       return {
           restrict: 'A',
           link: linkFunc,
       };
   
       /**
        * Adds active class to ng-link matching current route
        *
        * @param {Object} scope
        * @param {Object} element
        * @param {Object} attrs
        *  @param {String} attrs.ngLink
        *  @param {Function} attrs.$addClass
        *  @param {Function} attrs.$removeClass
        */
       function linkFunc (scope, element, attrs) {
   
           const activeClass = 'ng-link-active';
   
           scope.$watch(getUrl, setClass);
   
           function getUrl () {
               return $location.url();
           }
   
           function setClass () {
               // eg "/books/..." -> 'books'
               const pathName = $location.url().split('/')[1].toLowerCase();
               // eg "['Books']" -> 'books'
               const routeName = attrs.ngLink ? (attrs.ngLink.split('\'')[1].toLowerCase()) : '';
   
               if (pathName === routeName) {
                   attrs.$addClass(activeClass);
                   return;
               }
               attrs.$removeClass(activeClass);
           } // setClass
   
       } // linkFunc
   
   };