How to use a variable route with a named router-outlet?

Question

I have a key value pair. The value of the pair is a route. I am using a named router-outlet. I cannot find the correct syntax for this. Any help is appreciated.

.ts:

public myPair: { [key: string]: string } =
{
  'Keyvalue': 'MyRoutHere'
};

.html:

<div *ngFor="let item of myPair | keyvalue">
    <button mat-raised-button type="submit" color="accent" [routerLink]="item.value">{{item.key}}</button>
</div>

<router-outlet name="namedRoute"></router-outlet>

module.routes.ts

const routes: Routes = [{
    path: 'example', component: ExampleMainComponent, children: [
        { path: 'key-value', component: KeyValueComponent, outlet: 'namedRoute' }
    ]
}];

Things I have tried:

'Keyvalue': '[\'/examples\', {outlets: {\'definition\': [\'key-value\']}}]'
'Keyvalue': '(definition:key-value)'
'Keyvalue': '\\key-value'

Errors I get:

URL Segment: 'examples/%5B'/examples',%20%7Boutlets:%20%7B'definition':%20%5B'key-value'%5D%7D%7D%5D' Error: Cannot match any routes. URL Segment: 'examples/%5B'/examples',%20%7Boutlets:%20%7B'definition':%20%5B'key-value'%5D%7D%7D%5D'

'examples/%28definition:key-value%29'

Cannot match any routes. URL Segment: 'examples/key-value'

score 0 · Answer 1 · answered Aug 28 '18 at 17:10

it failed to read your object, change your ts and html to:

  public myPair: { [key: string]: string } =
  {
    Keyvalue: 'MyRoutHere'
  };

HTML:

    <div *ngFor="let item of myPair | keyvalue">
    <button mat-raised-button type="submit" color="accent" [routerLink]="item.value">{{item.key}}</button>
    </div>

    <router-outlet name="namedRoute"></router-outlet>

How to use a variable route with a named router-outlet?

1 Answers1