Angular2 link to parent Component in child Component template

Question

I am a beginner in angular2.

I try to use routes in a CRUD app. My problem are the nested routes. Chart example :

            AppComponent
              /       \
MealListComponent    DishListComponent
                         \
                       DishEditComponent <--- Must have DishList template

The link / and \\ respresent routes.

Problem : I want my DishEditComponent template is not include on DishListComponent template. You can test app on http://plnkr.co/edit/g7NaoVd5BkGtSmr8ZkFW?p=preview go to Liste Dish link, then to Add dish link.

You'll see both Dish List title and Dish Edit orr Add title because DishEditComponent template is included in DishListComponent template by router-outlet tag, but I want that only Dish Edit or Add title displayed.

Do you know a way to avoid nested routes ?

Answer 1

You can try using asyncRoute. Here is explanation for it.

import {Component, View, bootstrap} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {Home} from './components/home/home';
import {About} from './components/about/about';

@Component({
  selector: 'app'
})
@RouteConfig([
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' }
])
@View({
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
  directives: [ROUTER_DIRECTIVES]
})
class App {}

bootstrap(App, [ROUTER_PROVIDERS]);

Here’s the implementation of the About component:

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';

import {NameList} from '../../services/NameList';

@Component({
  selector: 'about',
  providers: [NameList],
  templateUrl: './components/about/about.html',
  directives: [CORE_DIRECTIVES]
})
export class About {
  constructor(public list: NameList) {}
  addName(newname):boolean {
    this.list.add(newname.value);
    newname.value = '';
    return false;
  }
}

The class, which implements RouteDefinition and allows asynchronous loading of the component associated with given route. This allows on demand loading of the component's dependencies as well. Here's now our definition will look like with AsyncRoute:

@RouteConfig([
  { path: '/', component: Home, name: 'home' },
  new AsyncRoute({
    path: '/about',
    loader: () => System.import('./components/about/about').then(m => m.About),
    name: 'about'
  })
])

Basically we register two routes: - A regular route - Async route. The async route accepts as argument a loader. The loader is a function that must return a promise, which needs to be resolved with the component that needs to be rendered.

Answer 2

I found the solution.

1. I must remove this line in DishListComponent template :

<router-outlet></router-outlet>

2. Replace line :

<a [routerLink]="['DishEdit']">Add dish</a>

by this line :

<button (click)="addDish()">Add dish</button>

3. Add import :

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';

4. Update DishListComponent constructor :

constructor(private router: Router) {

}

5. Add this method in DishListComponent :

addDish() {
    let link = ['DishEdit', {}];
    this.router.navigate(link);
}

6. Remove PROVIDERS in DishListComponent

Final code

Final DishListComponent

@Component({
  selector: 'dish-list',
  directives: [ROUTER_DIRECTIVES],
  template:`
    <h1>Dish List</h1>
    <button (click)="addDish()">Add dish</button>
    <main>

    </main>
    `
})
export class DishListComponent {
    constructor(private router: Router) {

    }

    addDish() {
        let link = ['DishEdit', {}];
        this.router.navigate(link);
    }
}

The final RouteConfig

@RouteConfig([
  {
    path: '/dish-list',
    name: 'DishList',
    component: DishListComponent
    //useAsDefault: true
  },
  {
    path: '/dish-edit',
    name: 'DishEdit',
    component: DishEditComponent
  },
  {
    path: '/meal-list',
    name: 'MealList',
    component: MealListComponent
  }
])

The plunker link : http://plnkr.co/edit/LsLdc0efJtPaEbASWPek?p=preview

I hope it will help !