I working in a new project with Angular 2 and have a single question, and I
need a suggestion.
I need a sidenav, where your content differs, according to a route
(secondary router). This sidenav have your outlet named.
By example:
I have a principal route, "one list of person", and each time click
over person, some information about person is displayed in sidenav.
If I define the dom structure the following way (app.component), this
throw a error.
<md-sidenav-layout fullscreen>
<md-sidenav #sidenav mode="side">
<md-nav-list>
<a md-list-item>
<md-icon md-list-icon></md-icon>
<span md-line></span>
<span md-line class="desc"></span>
</a>
<a md-list-item>
<md-icon md-list-icon></md-icon>
<span md-line></span>
<span md-line class="desc"></span>
</a>
</md-nav-list>
</md-sidenav>
<md-toolbar color="primary">
<div style="flex:1">
<button md-icon-button (click)="sidenav.toggle()">
<md-icon>menu</md-icon>
</button>
<span>---</span>
</div>
<button md-icon-button [mdMenuTriggerFor]="account">
<md-icon>more_vert</md-icon>
</button>
<md-menu #account="mdMenu">
<button md-menu-item>
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item>
<md-icon>help</md-icon>
<span>Help</span>
</button>
<button md-menu-item>
<md-icon>logout</md-icon>
<span>Logout</span>
</button>
</md-menu>
</md-toolbar>
<router-outlet></router-outlet>
<md-sidenav #sidenavInfo align="end" mode="side">
<router-outlet name="info"></router-outlet>
</md-sidenav>
</md-sidenav-layout>
And the router definition is:
export const ContactsAppRoutes = [
{ path: '', redirectTo: '/planos', pathMatch: 'full' },
{ path: 'viewer/:id', component: ViewerComponent },
{ path: 'planos', component: AgendaComponent },
{ path: 'planos/:id', outlet: 'info', component: AgendaDetailsComponent
}
]
I see severals examples about multiples outlets, by example:
- https://github.com/onehungrymind/ng2-named-router-outlets
I see in this project, that two "outlets" are in the same dom level,
underneath the parent component, is this a restrictions?, or I can define
outlets in any place of DOM structure and link this of any component
whitout distintion.
When from the component: "AgendaComponent", I want to navigate to the
details "AgendaDetailsComponent"
this.router.navigate (['planos', {outlets: {'info': [p.id]}}]);
The error is:
EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL
Segment: 'planos'
Error: Cannot match any routes. URL Segment: 'planos'
at ApplyRedirects.noMatchError
(http://localhost:4200/vendor.bundle.js:109231:16)
[angular]
at CatchSubscriber.selector
(http://localhost:4200/vendor.bundle.js:109200:29)
[angular]
at CatchSubscriber.error (http://localhost:4200/vendor.bundle.js:55124:31)
[angular]
at MapSubscriber.Subscriber._error
(http://localhost:4200/vendor.bundle.js:471:26)
[angular]
at MapSubscriber.Subscriber.error
(http://localhost:4200/vendor.bundle.js:445:18)
[angular]
at MapSubscriber.Subscriber._error
(http://localhost:4200/vendor.bundle.js:471:26)
[angular]
at MapSubscriber.Subscriber.error
(http://localhost:4200/vendor.bundle.js:445:18)
[angular]
at MapSubscriber.Subscriber._error
(http://localhost:4200/vendor.bundle.js:471:26)
[angular]
at MapSubscriber.Subscriber.error
(http://localhost:4200/vendor.bundle.js:445:18)
[angular]
at LastSubscriber.Subscriber._error
(http://localhost:4200/vendor.bundle.js:471:26)
[angular]
at LastSubscriber.Subscriber.error
(http://localhost:4200/vendor.bundle.js:445:18)
[angular]
at MergeAllSubscriber.OuterSubscriber.notifyError
(http://localhost:4200/vendor.bundle.js:850:26)
[angular]
at InnerSubscriber._error
(http://localhost:4200/vendor.bundle.js:115294:21)
[angular]
at InnerSubscriber.Subscriber.error
(http://localhost:4200/vendor.bundle.js:445:18)
[angular]
Any idea??
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
