新角1組件路由器 - 突出與活動路線

我有兩個鏈接導航欄相關鏈接：新角1組件路由器 - 突出與活動路線

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

我想強調與活動路線相關的鏈接。從本質上講，我想添加一個名爲router-link-active的類到以上兩個鏈接中的一個。對於新的Angular 1組件路由器，最簡單的方法是什麼？

來源

2016-04-20 Naresh

UPDATE：

的ComponentRouter折角1現在已經過時。對於使用角度爲1.5的組件，建議使用衆所周知的ui路由器。

角1組分路由器自動添加ng-link-active類活性ng-link秒。

如果您的版本沒有自動添加，您可能正在使用組件路由器的過期版本。我一直在使用this version，這是一個比較新的編譯版本，而不是文檔中所述的版本（0.2.0）。

讓我們希望他們很快就能完成生產。

來源

2016-05-26 13:34:08

感謝參考，丹尼爾。我一定會檢查出來。 – Naresh

-1

我不想與「非官方」發佈，所以我創建了我自己的指令，增加了ng-link-active（見下文）。

注：

你需要確保「路徑」和「名」在你的路由性質是相同的（不是「/」，其他的「：」和被忽略大小寫） - 我不喜歡這個限制，但是直到發佈一個固定的版本纔可以。

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

};

來源

2016-06-23 10:03:38 yar1

新角1組件路由器 - 突出與活動路線

回答

相關問題