html - Can't set up routing to a named outlet in Angular -

i have 3 named router outlets shown below.

... <router-outlet name="menus"><router-outlet> <router-outlet><router-outlet> <router-outlet name="footer"><router-outlet> ... 

in markup want route first one, menus, component submenu junk in shown in docs.

<ul *ngfor="let main of menus;"      routerlink="[{outlets:{menus:[{{main.link}}]}}]"      class="nav-items">{{main.header}} 

the error i'm getting says that:

error: cannot match routes. url segment: '%5b%7boutlets:%7bmenus:%5bsubmenu1%5d%7d%7d%5d'

am @ loss what's wrong syntax. googling fingernails off haven't found simple , crude example of routerlink version showing how point route in named outlet.

edit: based on comments , samples, need reformulate code being used, still same error. in markup:

<ul *ngfor="let main of menus;"      (click)="pullmenu(main.link)"      class="nav-items">{{main.header}} 

then, in ts:

constructor(private router: router, private route: activatedroute) { }  pullsubmenu(input) {   console.log(input);   this.router.navigate(     [{ outlets: { menus: [input] } }],      { relativeto: this.route }); } 

now, i'm getting following error (submenu1 name of configured path).

error: cannot match routes. url segment: 'submenu1'

my routing set in module this.

const routes: routes = [   { path: "submenu1", component: submenu1component },   { path: "submenu2", component: submenu2component } ];  @ngmodule({   declarations: [     appcomponent,     navbarcomponent,     mainareacomponent,     submenu1component,     submenu2component   ],   imports: [     browsermodule,     routermodule.forroot(routes)   ],   providers: [],   bootstrap: [appcomponent] }) export class appmodule { } 

you need use evaluated version [routerlink]:

<ul *ngfor="let main of menus;"      [routerlink]="[{outlets:{menus:[{{main.link}}]}}]"      class="nav-items">{{main.header}} 

as alternative can emulate routerlink. here gist of does:

  @hostlistener('click')   onclick(): boolean {     const extras = {       skiplocationchange: attrboolvalue(this.skiplocationchange),       replaceurl: attrboolvalue(this.replaceurl),     };     this.router.navigatebyurl(this.urltree, extras);     return true;   } 

so, here setup using navigate instead of navigatebyurl:

   @component({       template: `         <ul *ngfor="let main of menus;" (click)="[{outlets:{menus:[{{main.link}}]}}])"         class="nav-items">{{main.header}}       `    ...    class mycomponent {       constructor(router: router, route: activatedroute) {}        navigate(commands) {          this.router.navigate(commands, {relativeto: this.route}) 

you can't use unevaluated version of routerlink because reads commands string , if have outletsin commands strings don't work. see navigation secondary route url routerlink attribute understand why.