I've got a nav
component which is a menu that handles a bit of route switching, the problem I have is that I can't seem to render the content of the routes because I don't have a router-outlet
within the nav
component template.
Instead I would like to render the content of the route in my main app component core
, but how do I tell angular to use the router-outlet
in my core
component rather than in my nav
component?
Since my [routerLink]
is inside this template:
nav.component.html:
<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
<ul class="nav-links">
<li class="nav-link" *ngFor="#link of links">
<a [routerLink]="link.href">
<div class="label-wrapper">{{link.label}}</div>
<div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
</a>
</li>
</ul>
</nav>
It doesn't want to render the route into the core
component:
core.component.html:
<!-- The menu -->
<nav-list></nav-list>
<!-- The router-outlet which should render the videos component -->
<router-outlet></router-outlet>
videos.component.html:
<h1>My videos</h1>
<!-- This should render the child views of the videos component -->
<router-outlet></router-outlet>
list.videos.component.html:
<h1>Videos list</h1>
So as you can see I want the bottom snippet to be rendered into the middle snippet which is then rendered at the top, inside the core
component.
How can I do this?
The bottom line is that I DO NOT want to have a router-outlet
in the nav
component.
The Router-Outlet is a directive that's available from the router library where the Router inserts the component that gets matched based on the current browser's URL. You can add multiple outlets in your Angular application which enables you to implement advanced routing scenarios.
Router-outlet in Angular works as a placeholder which is used to load the different components dynamically based on the activated component or current route state. Navigation can be done using router-outlet directive and the activated component will take place inside the router-outlet to load its content.
The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application.
Yes! We can use multiple router-outlets in same template by configuring our routers and simply add the router-outlet name. You can see in the example.
So I've a similar setup where I've a main layout component:
<shellheader (menuToggle)="onMenuToggle($event)"></shellheader>
<section id="main">
<navigation [menuToggled]="menuToggled"></navigation>
<section id="content">
<div class="container">
<div class="block-header">
<h2>Header</h2>
<router-outlet></router-outlet>
</div>
</div>
</section>
</section>
<shellfooter></shellfooter>
Main layout component code:
@Component({
templateUrl: "app/shell/main-layout.component.html",
directives: [ROUTER_DIRECTIVES, NavigationComponent, HeaderComponent, FooterComponent]
})
@RouteConfig([
{ path: "/dashboard/...", name: "Dashboard", component: DashboardComponent, useAsDefault: true }
])
export class MainLayoutComponent {
public menuToggled: boolean;
public onMenuToggle(event:boolean) {
this.menuToggled = event;
}
}
And in my navigation component, I've got some router links (and no router outlet, only using routerlink directive, no child routes defined):
<ul class="main-menu">
<li *ngFor="#navItem of navItems">
<a [routerLink]="navItem.route">
<i *ngIf="navItem.icon" class="{{navItem.icon}}"></i>
{{ navItem.text }}
</a>
</li>
</ul>
Clicking those router links changes the route in the browser, and the outlet in the main component responds to those route changes.
You shouldn't need to have the router-outlet in your nav component. If the routes aren't rendering out to your main component, it's possible that you've not included the required directives in the main component e.g.:
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
...
@Component({
directives: [ROUTER_DIRECTIVES, ...]
})
Plunker: https://plnkr.co/edit/P6Bkwy?p=info
Further info: https://angular.io/docs/ts/latest/guide/router.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With