新 Angular 1 Component Router - 突出显示与活动路由关联的 link

Question

我有一个带有两个 link 的导航栏：

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

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

Answer 1

更新：

Angular1 的 ComponentRouter 现已弃用。要使用 angular 1.5 组件，建议使用著名的 ui-router。

Angular 1 Component Router 自动将 ng-link-active class 添加到活动的 ng-links.

如果您的版本没有自动添加它，您可能使用的是组件路由器的过时版本。我一直在使用 this version 这是一个更新的编译而不是在文档中声明的那个（它是 0.2.0）。

希望他们尽快投入生产。

Answer 2

我不想使用 "non-official" 版本，所以我创建了自己的指令，添加了 ng-link-active（见下文）。

备注：

您需要确保路由中的 "path" 和 "name" 属性相同（除了“/”、“:”和忽略的大写）- 我不喜欢这个限制，但在发布固定版本之前对我来说没问题。

这是在 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

};

新 Angular 1 Component Router - 突出显示与活动路由关联的 link

New Angular 1 Component Router - Highlighting the link associated with the active route

angularjs

angular-component-router