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类添加到活动ng-link。

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

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

Answer 2

我不想和非官方的＃34;发布，所以我创建了自己的指令，添加了ng-link-active（见下文）。

注意：

你需要确保＆＃34;路径＆＃34;和＆＃34;名称＆＃34;你的路线中的属性是相同的（＆＃34; /＆＃34;，＆＃34;：＆＃34;以及被忽略的大写字母除外） - 我不喜欢这个限制，但它不是这样的。对我来说没问题，直到发布固定版本。

这是在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组件路由器 - 突出显示与活动路由关联的链接

2 个答案: