Geek Answers Handbook

Angular 2 dynamically sets routerLink using component property

I created a component that contains an element with the routerLink property that I want to install from a template that uses this component. When I try to do this, I get the error "Unable to read property" path "from undefined".

My component looks like this:

info-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;
}

o-box.component.html

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

And the template in which the component is used is as follows:

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

If I do not add routerLink, everything works fine. My router configuration seems correct, because when I add directly to my template, it also works great. Can anyone help me with this?

Gret Marco

+6
3

URL HTML.

, - path:'destination/:id', routerLink :

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

, , Angular 2.4

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

app.module.ts ROUTER_DIRECTIVES, , :

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

, :

this.menuuItems = [
  {
    text: 'Tournament Setup',
    path: 'app-tournament'
  }];

HTML

<li *ngFor = "let menu of menuuItems">
     <span routerLink="/{{menu.path}}">
      <a>{{menu.text}}</a>
    </span>
    </li>
+1

More articles:


All Articles