CODEWITHSUNDEEP
angularangular-routerangular-routerlink
frankle
frankle

Reputation: 141

Create a routerLink to a child route that appears in a named <router-outlet>

I have some named <router-outlet> which I can navigate to by url like so: (outletname:path).

I have been able to create a routerLink like so:

<a [routerLink]="[{ outlets: { outletname : [child.attributes.href] } }]" routerLinkActive="active">{{child.attributes.text}}</a>

You can see that I've had to provide outletname in [routerLink]. What I would like is to provide the outlet name by a variable. I'm trying to iterate over a collection of child routes that may use different named <router-outlet>.

So is there away to provide the outletname via a variable like so ..?

<a [routerLink]="['wordpress/',{ outlets: { OUTLET_NAME_AS_VAR : [child.attributes.href] } }]" routerLinkActive="active">{{child.attributes.text}}</a>

Upvotes: 2

Views: 10152

Answers (1)

hepifish
hepifish

Reputation: 784

RouterLink can be used for a single path, like this: 

<a routerLink="wordpress">Link1</a>

(you don't need the square brackets here)

Or for "composed" paths (what you need), like this:

<a [routerLink]="['wordpress', var, 'item']">Link2</a>

where var is defined in the component. Notice two things:

  1. var is not in brackets {{}} -> you would get the error you've already mentioned
  2. the items are in a list (which you already use, but not correctly). The above mentioned code would become /wordpress/myValue/item
    (ts: public var = 'myValue')

The {} are used for params, so you don't need them, since you only need a normal path.

update

You can create a json inside your component which would look like this: 

public outletPaths = {
   outletName: 'value1'
};

and you can include it like 

<a [routerLink]="['wordpress/', {outlets: outletPaths}]"> Go to page </a>

Hope this helps

Upvotes: 2

Related Questions