child 组件模板中的 Angular2 link 到 parent 组件

Question

我是angular2的初学者。

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

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

link/和\代表路由。

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

您会看到 Dish List 标题和 Dish Edit 或 Add 标题，因为 DishEditComponent 模板包含在 DishListComponent 模板中 router-outlet 标签，但我只想显示 Dish Edit 或 Add 标题。

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

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

class，它实现了 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 是一个必须 return 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
  }
])

笨蛋 link : http://plnkr.co/edit/LsLdc0efJtPaEbASWPek?p=preview

希望对您有所帮助！