【问题标题】：Angular2 link to parent Component in child Component templateAngular2链接到子组件模板中的父组件
【发布时间】：2016-05-18 18:46:11
【问题描述】：

我是 angular2 的初学者。

我尝试在 CRUD 应用中使用路线。我的问题是嵌套路线。图表示例：

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

链接 / 和 \ 表示路由。

问题：我希望我的 DishEditComponent 模板不包含在 DishListComponent 模板中。您可以在 http://plnkr.co/edit/g7NaoVd5BkGtSmr8ZkFW?p=preview 上测试应用程序，转到 Liste Dish 链接，然后转到 Add disc 链接。

您会同时看到 Dish List 标题和 Dish Edit orr Add 标题，因为 DishEditComponent 模板由 router-outlet 包含在 DishListComponent 模板中标签，但我希望只显示 Dish Edit or Add 标题。

你知道避免嵌套路由的方法吗？

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

您可以尝试使用 asyncRoute。这是对它的解释。

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

实现 RouteDefinition 并允许异步加载与给定路由关联的组件的类。这也允许按需加载组件的依赖项。现在我们的定义将与 AsyncRoute 类似：

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

基本上我们注册了两个路由： - 常规路由 - 异步路由。异步路由接受加载器作为参数。 loader是一个函数，必须返回一个promise，需要用需要渲染的组件来解析。

【讨论】：

感谢您的回答，但 AsyncRoute 用于单独加载元素。它如何解决我的问题？

【解决方案2】：

我找到了解决方案。

1。我必须在 DishListComponent 模板中删除这一行：

<router-outlet></router-outlet>

2。换行：

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

通过这一行：

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

3。添加导入：

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

4。更新 DishListComponent 构造函数：

constructor(private router: Router) {

}

5。在 DishListComponent 中添加此方法：

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

6。移除 DishListComponent 中的 PROVIDERS

最终代码

最终菜列表组件

@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);
    }
}

最终的 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
  }
])

插件链接：http://plnkr.co/edit/LsLdc0efJtPaEbASWPek?p=preview

希望对你有帮助！

【讨论】：