Angular2链接到子组件模板中的父组件

Question

我是angular2的初学者。

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

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

链接/和\ respresent路由。

问题：我希望我的DishEditComponent模板不包含在DishListComponent模板上。 您可以在http://plnkr.co/edit/g7NaoVd5BkGtSmr8ZkFW?p=preview上测试应用，转到倾听菜单链接，然后转到添加菜肴链接。

您会看到 Dish List 标题和 Dish Edit orr Add 标题，因为DishEditComponent模板包含在DishListComponent模板中 router-outlet 标签，但我希望只显示菜单编辑或添加标题。

您是否知道避免嵌套路线的方法？

Answer 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'
  })
])

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

Answer 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

最终代码

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

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

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

我希望它会有所帮助！