Не удается прочитать свойство «выходные точки» null в Angular 4

У меня есть проект Angular 4.3.6, где фрагмент шаблона выдает эту ошибку.

Блок шаблона:

<a [routerLink]="['/article',article?.id]">{{article?.title}}</a>

Трассировка стека ошибок:

ArticleSpComponent.html:26 ERROR TypeError: Cannot read property 'outlets' of null
    at createNewSegmentGroup (router.es5.js:2967)
    at updateSegmentGroup (router.es5.js:2896)
    at router.es5.js:2914
    at forEach (router.es5.js:593)
    at updateSegmentGroupChildren (

Причина ошибки кажется очевидной. переменная article извлекается асинхронно из Http и инициализируется после рендеринга страницы, поэтому сначала она равна нулю. Однако я подумал, что установка ? после этой переменной позволяет избежать этой проблемы.

Вы могли бы посоветовать?


angular angular-router
person Sergiy    schedule 28.08.2017    source источник

Ответы (2)


arrow_upward
48
arrow_downward

? в article?.id работает нормально, но директива RouterLink не любит, когда передается null.

Вы можете обойти, используя что-то вроде:

<a *ngIf="article" [routerLink]="['/article',article?.id]">{{article?.title}}</a>
<a *ngIf="!article">{{article?.title}}</a>
person Günter Zöchbauer    schedule 28.08.2017
comment
Спасибо, Гюнтер. Я думал о таком решении. Однако я подозревал, что в Angular может быть ошибка. - person Sergiy; 31.08.2017
comment
Вы можете рассматривать это как ошибку, но неясно, что должен делать routerLink, когда он получает null как часть маршрута. Я не вижу никакого разумного поведения. Однако лучшее сообщение об ошибке может быть полезным. Пожалуйста, рассмотрите возможность сообщить об ошибке (если ее еще нет) - person Günter Zöchbauer; 31.08.2017
comment
В итоге я использовал аналогичное решение, передав маршрут по умолчанию: [routerLink]="[ '/article', article?.id || 'all' ]" - person DoubleA; 29.11.2017
comment
Альтернатива оператора двойной трубы сработала для меня. Но я все еще ищу не обходное решение :) Спасибо. - person rom5jp; 05.07.2018
comment
Я не думаю, что есть один. - person Günter Zöchbauer; 06.07.2018
comment
Ответ DoubleA - лучшее решение, так как он очищает все ошибки консоли! - person skiabox; 19.03.2019
comment
Или вы можете обернуть тот же routerLink внутри ng-контейнера с предложением ngIf для article. - person Safal Pillai; 08.08.2019

arrow_upward
0
arrow_downward 

 <a  [routerLink]="['/language',language.iso639_1 || 'all']" >{{language.name}}</a>

Я также столкнулся с той же проблемой (не могу прочитать свойство 'outlets' of null ), но приведенный выше код, который я написал, сработал для меня.

person user14180589    schedule 28.08.2020