routerLink не работает внутри ngFor

Я сталкиваюсь с этой приятной проблемой уже три дня. Давайте начнем с этого единственного HTML-кода, который делает

<mat-list-item    *ngFor="let setting of SideBarLinks"
                   [ngStyle]="{'display': setting['_value'] === true ? 'block':'none'}"   routerLink="[{{setting.link}}]">
        <mat-icon mat-list-icon>{{setting['icon']}}</mat-icon>
        {{setting.name}}
 </mat-list-item>

проблема в том, что сколько раз я нажимаю на него, он ничего не делает. Я попытался автоматизировать список на боковой панели, используя отдельный JSON, связанный с приложением. Я использую AngularX около года и знаю, что директива routerLink работает не со всеми существующими компонентами. но когда я использую его как отдельный компонент (без *ngFor)

Вот изображение, которое может помочь вам понять


angular angular-material routerlink
person Alexandre Saison    schedule 31.10.2017    source источник
comment
Попробуйте [routerLink]=setting.link   -  person abhijeetwebdev    schedule 31.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

правильный синтаксис:

[routerLink]="[setting.link]">

без [] означает, что это значение, и вы можете использовать синтаксис {{ }}, чтобы сделать его динамическим, с квадратными скобками означает, что это выражение. Поскольку вы используете синтаксис массива routerLink, я предполагаю, что вам это нужно, а это значит, что вам нужно выражение.

person bryan60    schedule 31.10.2017
comment
Я попробовал ваш ответ, но, как мне казалось, у меня не получилось... когда я проверяю компонент при отображении веб-приложения, элемент списка отображается без routerLink... Похоже, что элемент списка потерял атрибут routerLink, и отображается как элемент без ссылки - person Alexandre Saison; 31.10.2017
comment
Я не думаю, что вы понимаете, как работают маршрутизаторы. Они не должны быть в элементе, когда вы проверяете его с помощью инструментов разработчика. Если вы соберете plunkr, я с радостью докажу, что это работает, и покажу вам, что вы ошибаетесь в другом месте. Ваше заявление о том, что я любезно знаю, что директива routerLink не работает для каждого существующего компонента, говорит мне о том, что вы просто недостаточно хорошо знаете внутреннюю работу углового маршрутизатора, потому что она ДЕЙСТВИТЕЛЬНО работает для каждого существующего компонента. - person bryan60; 01.11.2017
comment
Подождите, я только что понял ваш вопрос... Вы ДЕЙСТВИТЕЛЬНО пытаетесь сделать элемент списка материалов ссылкой? Конечно, это не работает. Ссылки маршрутизатора поддерживаются только для якорей и кнопок. Вам нужно сделать тег привязки. Дух. - person bryan60; 01.11.2017
comment
Черт, да ... извините, если мой вопрос был ужасно задан ... Я знаю это, но каким-то странным образом это работает для одного элемента списка материалов, например, мой элемент списка настроек работает, но кажется, что это потому, что он находится за пределами ngFor - person Alexandre Saison; 01.11.2017
comment
это не имеет ничего общего с ngFor, это потому, что вам в этом случае нужно выражение, а истинная привязка директивы (со скобками) не работает, потому что она поддерживается только для тегов привязки и кнопок, просто поместите тег привязки вокруг внутренние элементы и поместите туда директиву. - person bryan60; 01.11.2017
comment
я, наконец, использую идею тега привязки, я уже протестировал ее, я знал, что она будет работать, но я хотел, чтобы она работала так же, как и в одном элементе списка матов. - person Alexandre Saison; 02.11.2017

arrow_upward
0
arrow_downward

Попробуйте создать метод

getRouerLink(link) {
  return [link];
}

а затем вызовите его в своем * ngFor, например routerLink = "getRouterLink(setting.link)"

person komron    schedule 31.10.2017
comment
Большое спасибо, я попробую это как можно скорее! - person Alexandre Saison; 31.10.2017
comment
ваш ответ, как и другой, не работает, похоже, что компонент не принимает routerLink при отображении с помощью * ngFor - person Alexandre Saison; 31.10.2017
comment
Тогда вы уверены, что объект «настройка» имеет информацию/имеет правильную информацию? вы проверили? - person komron; 01.11.2017
comment
да я его даже показывал - person Alexandre Saison; 01.11.2017
comment
Является ли setting статическим? Если нет, можете ли вы предоставить код компонента? - person komron; 01.11.2017
comment
нет, это не здесь ссылка моего репозитория на github - person Alexandre Saison; 01.11.2017
comment
В вашем github это все еще routerLink="{{setting.link}}". Правильно ли он печатает {{setting.name}}? - person komron; 01.11.2017
comment
Да, я изменился, как ты сказал мне, но не git push - person Alexandre Saison; 01.11.2017
comment
[routerLinkActive]="['active-route'] попробуйте добавить это рядом с [routerLink], также в вашем github [routerLink] находится перед * ngFor, попробуйте поместить его после ngFor. Если это не поможет, попробуйте поместить тег ‹a› внутрь mat-list-item и добавить routerLink к этому тегу. - person komron; 01.11.2017
comment
хорошо, я проверю это, вернусь после этого - person Alexandre Saison; 01.11.2017