首页 文章

Angular 2 - 从父组件的`first child`组件到'second child`组件的路由

提问于
浏览 次
2

我正在尝试从子组件到父组件的另一个子组件进行简单的路由 . router-outlet 在父组件中定义 . 以下是我试图实现这一目标的方法：

parent.ts

import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {FirstChildCmp} from "./first_child";
import {SecondChildCmp} from "./second_child";

@Component({
  selector: 'app',
  template: `
  <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/first_child', component: FirstChildCmp, name: 'FirstChild', useAsDefault:true},
  {path: '/second_child',component: SecondChildCmp, name:'SecondChild'}
])
export class ParentCmp{}

bootstrap(ParentCmp,[
  ROUTER_PROVIDERS
]);

first_child.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'child',
  template: `
  <a [routerLink]="[SecondChild]">Go to second child</a>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}

second_child.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'child',
  template: `
  This is second child.
  `
})
export class SecondChildCmp{}

当用户单击 Go to second child 时，我想显示第二个子组件的模板 . 但是我收到以下错误：

组件“FirstChildCmp”没有路由配置 .

但我不想在 FirstChildCmp 中定义配置，而是想使用父配置 . 我在plunker here重新制作了这个问题

javascript routing angular

1 回答

  • 3

    FirstChild.ts Plnkr

    @Component({
  selector: 'child',
  template: `
  <a [routerLink]="['SecondChild']">Go to second child</a>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}

    在 ['SecondChild'] 你错过了报价 . 它必须是一个字符串 .

    回复于

相关问题