CODEWITHSUNDEEP
angularangular2-routing
Chrillewoodz
Chrillewoodz

Reputation: 28338

Pointing to a child route in Angular 2

This looks like a big question but it's actually quite simple (I think), I want to point to a child view from my menu. In my top app component (core) I've defined a parent route named Videos, which have 3 child routes (create, edit, list) which it can render.

What I don't understand though is how to point to the child routes from my menu? Now I just point to the parent route but it doesn't know which child route to render since I'm not telling it how to do this.

How do you do this?

core.component.ts (the main app component):

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {NavComponent} from '../nav/nav.component';
import {TagsComponent} from '../tags/tags.component';
import {VideosComponent} from '../videos/videos.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: '/videos/...', name: 'Videos', component: VideosComponent}
])

export class CoreComponent {

}

videos.component.ts (parent route):

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {CreateVideosComponent} from '../videos/create/create.videos.component';
import {EditVideosComponent} from '../videos/edit/edit.videos.component';
import {ListVideosComponent} from '../videos/list/list.videos.component';

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

@RouteConfig([
  {path: '/create', name: 'Create', component: CreateVideosComponent},
  {path: '/edit', name: 'Edit', component: EditVideosComponent},
  {path: '/list', name: 'List', component: ListVideosComponent}
])

export class VideosComponent {}

list.videos.component.ts (one of the child routes):

import {Component} from 'angular2/core';

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

export class ListVideosComponent {}

nav.component.ts (my menu):

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.item.ts (the interface for a menu item):

export interface NavItem {
  href: string,
  label: string,
  icon: string
}

nav.list.ts (the info for the menu):

import {NavItem} from '../nav/nav-item';

export var NAVLIST: NavItem[] = [
  { 'href': 'Videos', 'label': 'Videos', 'icon': 'icon icon-contact' }
]

nav.component.html (how I take NAVLIST and creates a menu from it):

<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>

Upvotes: 0

Views: 551

Answers (1)

Langley
Langley

Reputation: 5344

The usage is something like this:

<a [routerLink]="['ParentRouteName','ChildRoute','GrandchildRoute']">Somewhere</a>

So in your example you can do something like:

{ 'href': ['Videos','List'], 'label': 'Videos', 'icon': 'icon icon-contact' }

and

<a [routerLink]="link.href">

Upvotes: 1

Related Questions