CODEWITHSUNDEEP
angularangular2-routing
Chrillewoodz
Chrillewoodz

Reputation: 28368

Routing in Angular2

I'm learning angular 2 but is facing a problem which is a tad confusing to me. If I have a core and a nav component, and I want the nav component to render a route defined in the core component, how do I do that?

Because now I've defined the routes in my core component and put a [routerLink]="['About']" attribute in my nav component template, but it seems as if it can't find it or that some error occurs because as soon as I add this attribute directive it causes the core component to not load as well as semi-freezing the browser, as if it's performing some sort of infinite loop.

I get no errors telling me anything which doesn't help me a bit. I've read the documentation for routing in angular2 but they only show it with a single component, not when trying to load routes defined in the core component from a separate component. What could be the issue here?

core.component.ts:

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {NavComponent} from '../nav/nav.component';
import {AboutComponent} from '../about/about.component';
import {ContactComponent} from '../contact/contact.component';

@Component({
  selector: 'core-app',
  templateUrl: './app/assets/scripts/modules/core/core.component.html',
  styleUrls: ['./app/assets/scripts/modules/core/core.component.css'],
  directives: [NavComponent]
})

@RouteConfig([
  {path: '...', name: 'Home', component: CoreComponent},
  {path: '/about', name: 'About', component: AboutComponent},
  {path: '/contact', name: 'Contact', component: ContactComponent}
])

export class CoreComponent {

}

nav.component.ts:

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
import {NavService} from '../nav/nav-api.service';
import {NAVLIST} from '../nav/nav-list';

@Component({
  selector: 'nav-list',
  templateUrl: './app/assets/scripts/modules/nav/nav.component.html',
  styleUrls: ['./app/assets/scripts/modules/nav/nav.component.css'],
  providers: [NavService],
  directives: [ROUTER_DIRECTIVES],
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()'
  }
})

export class NavComponent {
  public isToggled = false;
  public links = NAVLIST;

  constructor(private _navService: NavService) {}

  show() {
    this.isToggled = this._navService.show();
  }

  hide() {
    this.isToggled = this._navService.hide();
  }
}

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]="['About']">
        <div class="label-wrapper">{{link.label}}</div>
        <div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
      </a>
    </li>
  </ul>
</nav>

Upvotes: 1

Views: 709

Answers (1)

Langley
Langley

Reputation: 5344

Take a look at this: {path: '...', name: 'Home', component: CoreComponent},

By doing '...' you are saying that some other component will solve the path (that component needs RouteConfig on it) you want the CoreComponent to handle all routes, but all routes already go through it. So you are redirecting to it indefinitely.

Upvotes: 3

Related Questions