Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Choose which router-outlet that should be used to render the content of a route

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.

like image 783
Chrillewoodz Avatar asked Jan 29 '16 20:01

Chrillewoodz


People also ask

What is router outlet used for?

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.

How would you use a router outlet to display a view?

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.

Which of the following correctly describe use of router outlet in Angular?

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.

What is router Outlet Is it possible to use more than router outlet?

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.


1 Answers

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

like image 196
MIP1983 Avatar answered Oct 03 '22 05:10

MIP1983