CODEWITHSUNDEEP
javascripthtmlangularangular2-routing
JD Francis
JD Francis

Reputation: 494

How to route from within an inner component in Angular 2?

So I'm fairly new to Angular 2, I decided to use it in one of my projects with it to get myself familiar with it. So my scenario is this: I'm trying to make a single-page dashboard application and I've currently got 3 components: App, Sidebar, and Navbar, and my MainPage (the main page dashboard area of my site). Essentially I need to use [routerLink]="['destination']" from both my navbar and my sidebar and it needs to change the <router-outlet> on the App component. I feel like there is something obvious that I'm missing. How do I go about doing this? My files look like this currently:

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {NavbarComponent} from './navbar.component.ts'
import {SidebarComponent} from './sidebar.component.ts'
import {MainPageComponent} from './mainpage.component.ts'

@Component({
selector: 'application',
template: `
    <navbar></navbar>
    <sidebar id="sidebar-wrapper"></sidebar>

    <!-- I need to do this, but in the sidebar and navbar components -->
    <a [routerLink]="['Home']">Home</a>

    <button (click)="goBack()">Back</button>
    <router-outlet></router-outlet>
    `,
    styleUrls: ['css/navigation.css'],
    directives: [ROUTER_DIRECTIVES, NavbarComponent, SidebarComponent, MainPageComponent],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    {
        path: '/home',
        name: 'Home',
        component: MainPageComponent
    }
])

export class AppComponent { 
    goBack() {
        window.history.back();
    }
}

Navbar.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

@Component({
    selector: 'navbar',
    template: `
    <nav class="navbar navbar-default">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- Here's an example of what I mean. This doesn't actually do anything -->
          <a class="navbar-brand navbar-center" [routerLink]="['Home']"><img src="img/logo.svg"/></a>


        </div>
        <div class="collapse navbar-collapse" id="mainNav">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#"><i class="fa fa-user"></i>This is you!</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-calendar"></i></a></li>
            <li><a href="#"><i class="fa fa-exclamation-circle"></i></a></li>
            <li><a href="#"><i class="fa fa-cog"></i></a></li>
           </ul>
        </div>
    </nav>

`,
    styleUrls: ['css/navigation.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

export class NavbarComponent { }

`

Upvotes: 1

Views: 707

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

Don't add providers: [ROUTER_PROVIDERS] to components. ROUTE_PROVIDERS should only be added to bootstrap(...)

If you add ROUTER_PROVIDERS to providers: [...] of a component, new instances are maintained for this component and it's descendants, this breaks the connection to the global router (ROUTER_PROVIDERSadded tobootstrap(AppComponent, [ROUTER_PROVIDERS])). The router is built in a way that it only works when provided globally only, therefor just add tobootstrap()` but nowhere else.

Upvotes: 2

Related Questions