поведения маршрутизатора Ссылка сломано Angular2 беты

Question

Я хотел бы выделить текущий активное подключение

<a [routerLink]="['/route']" /> 

После рендеринга я получаю <a> тег с правильной ссылкой, которая работает хорошо.

Но также есть дополнительное поведение в этих Директивах, которые должны добавить маршрутизатор-канальный активный класса к якорю в случае HREF таким же, как текущее местоположение.

Проблема в том, что это не работает.

get isRouteActive(): { 
    return this._router.isRouteActive(this._navigationInstruction); 
} 

Внутри _router.IsRouteractive есть текущее поле инструкции, которая должна содержать текущие компоненты маршрута. И этот компонент сравнивается с __navigationInstruction. На самом деле, если компоненты маршрута равны - связь является текущей.

Проблема в том, что текущая инструкция null. Он присваивается в:

Router.prototype.commit = function(...) 

Эта функция вызывается после обработки Директивы.

Так что это никогда не должно работать хорошо.

Answer 1

я делал что-то вроде этого:

<li [class.active]="somethingThatReturnsTrueOrFalse()"><a [routerLink]="['/About']" class="link">About</a></li> 

Это, кажется, работает хорошо для моего основного меню здесь: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

Не уверен, если это помогает вашей проблеме с возможным разбитым поведением маршрутизатора но this plunker имеет хорошее решение для отметки других элементов с изменениями маршрутизатора (например, родительский ли). Плункер включает в себя директиву: LinkActiveDirective.ts (использование можно увидеть в Users.ts)

Директива перехватывает [linkActive] и слушает изменения маршрутизатора. Когда ссылка маршрутизатора активна, класс становится активным в элементе.

Использования как это:

<li linkActive> 
    <a [routerLink]="['./Home']">Home</a> 
</li> 

Надеется, что это помогает.

Answer 3

У меня есть директива, которую вы можете использовать. См Pull-Request https://github.com/angular/angular/pull/6407/files

Answer 4

Здесь https://github.com/angular/angular/issues/6360#event-511390805 он говорит

Перемещение angular2-polyfills.js и ES6-shim.js ниже system.js тег сценария сделал трюк. Thanks