Поведение Router Link нарушено в бета-версии Angular2

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

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

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

Но также в этой директиве есть дополнительное поведение, которое должно добавить класс router-link-active к привязке в случае, если href совпадает с текущим местоположением.

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

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

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

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

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

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

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


angular angular2-directives typescript1.7
person deeptowncitizen    schedule 23.12.2015    source источник

Ответы (4)


arrow_upward
1
arrow_downward

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

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

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

person TGH    schedule 23.12.2015
comment
Спасибо. но моя проблема не в [class.active], а в 'router-link-active'. В вашем примере вы автоматически получаете этот класс в ang2.beta-0. И я не понимаю - person deeptowncitizen; 23.12.2015
comment
Хм.. Интересно. Мой образец также использует бета-0 - person TGH; 23.12.2015
comment
да я вижу. вот почему это более интересно и довольно странно. я отладил это. но я использую TypeScript. и компиляция из TS: github.com/deeptowncitizen/currency-fetcher - person deeptowncitizen; 23.12.2015
comment
Не уверен, что это имеет значение, но я бы попробовал переместить шаблон с routerLinks в отдельный HTML-шаблон, чтобы избежать экранирования в строке. - person TGH; 24.12.2015

arrow_upward
1
arrow_downward

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

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

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

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

Надеюсь, поможет.

person mikeesouth    schedule 01.01.2016
comment
спасибо за ваш пример. насколько я вижу, есть много примеров для Angular2 Beta, которые хорошо работают. И главное отличие состоит в том, что во всех этих примерах используется ссылка CDN JS Angular. И я использую webpack + TS + CommonJS. Попытка воспроизвести такое же поведение с CDN - person deeptowncitizen; 03.01.2016

arrow_upward
0
arrow_downward

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

person gdi2290    schedule 11.01.2016

arrow_upward
0
arrow_downward

Здесь https://github.com/angular/angular/issues/6360#event-511390805 там написано

Перемещение angular2-polyfills.js и es6-shim.js ниже тега сценария system.js помогло. Спасибо

person Günter Zöchbauer    schedule 11.01.2016