Угловой 2 динамически установлен routerLink с использованием свойства компонента

Question

Я создал компонент, который содержит элемент с свойством routerLink, который я хочу установить из шаблона, который использует этот компонент. Когда я пытаюсь сделать это, я получаю сообщение об ошибке «Невозможно прочитать свойство« путь неопределенного ».

Мой компонент выглядит связывают это:

инфо-box.component.ts

import { Input, Component } from "@angular/core"; 
import { ROUTER_DIRECTIVES } from "@angular/router"; 

@Component({ 
    selector: "info-box", 
    template: require("./info-box.component.html"), 
    directives: [ 
     ROUTER_DIRECTIVES 
    ] 
}) 

export class InfoBoxComponent { 
    @Input() routerLink: string; 
    @Input() imageUrl: string; 
} 

инфо-box.component.html

<a [routerLink]="[routerLink]"> 
    <img src="{{imageUrl}}" width="304" height="236"> 
</a> 

А и шаблон, где компонент используется оно выглядит так:

<info-box [routerLink]="['/test']" [imageUrl]="['./testimage.jpg']" 

Если я не добавляю routerLink, все работает нормально. Моя конфигурация маршрутизатора кажется правильной, потому что, когда я добавляю непосредственно к моему шаблону, он также отлично работает. Кто-нибудь может мне с этим помочь?

Grt Marco

Answer 1

вы можете использовать такой код для динамического создания URL в HTML

, например, ваш путь в маршрутизаторе path:'destination/:id', то вы можете использовать routerLink как этот

<div *ngFor = "let item of items"> 
<a routerLink = "/destination/{{item.id}}"></a> 
</div> 

я надеюсь мой ответ полезный

Answer 2

Для тех, кто имеет эту проблему, используя Angular 2.4 в сочетании с

import { AppRoutingModule } from './app-routing.module';

в app.module.ts вместо ROUTER_DIRECTIVES, который больше не нужен, следующий синтаксис работал для меня:

<a [routerLink]="['item', item.id ]">Item</a>