Angular2コンポーネント - 1子から他の

Question

に移動する方法がわからない私持っている自身がルータのそれぞれを持っている2つのコンポーネントを指すルータを定義する親コンポーネント、

のようなもの親

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

import {Child1WithRouterComponent} from './childWithRouter1.component'; 
import {Child2WithRouterComponent} from './childWithRouter2.component'; 

@Component({ 
    selector: 'mex-app', 
    template: ` 
     <h2>MEAN2 Examples</h2> 
     <div style="width: 30%;float:left"> 
      <button type="button" style="width: 100%" 
        (click)="child1()">Child 1</button> 
      <button type="button" style="width: 100%" 
        (click)="child2()">Child 2</button> 
     </div> 
     <div style="width: 70%;float:left"> 
      <router-outlet></router-outlet> 
     </div> 
     `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path: '/child1/...', name: 'Child1', component: Child1WithRouterComponent, useAsDefault: true}, 
    {path: '/child2/...', name: 'Child2', component: Child2WithRouterComponent} 
]) 
export class AppComponent { 
    constructor(private router: Router) {} 

    child1() { 
    this.router.navigate['Child1'] 
    } 
    child2() { 
    this.router.navigate['Child2'] 
    } 
} 

CHILD1

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

import {GrandChild1Component} from './grandChild1.component'; 
import {GrandChild2Component} from './grandChild2.component'; 

@Component({ 
    selector: 'mex-child1', 
    template: ` 
     <h3>Child with router</h3> 
     <button type="button" 
        (click)="goToGrandChild1()">GO TO GRAND CHILD1</button> 
     <button type="button" 
        (click)="goToGrandChild2()">GO TO GRAND CHILD2</button> 
     <router-outlet></router-outlet> 
     `, 
    directives: [ROUTER_DIRECTIVES], 

}) 
@RouteConfig([ 
    {path: '/grand-child-1', name: 'GrandChild1', component: GrandChild1Component}, 
    {path: '/grand-child-2', name: 'GrandChild2', component: GrandChild2Component} 
]) 
export class Child1WithRouterComponent { 
    constructor(private router: Router) {} 

    goToGrandChild1() { 
    this.router.navigate(['GrandChild1']) 
    } 
    goToGrandChild2() { 
    this.router.navigate(['GrandChild2']) 
    } 
} 

CHILD2は親プログラムCHILD2にCHILD1から移動し、その逆がthis.router.navigate['Child1']又はthis.router.navigate['Child2']を実行することができるはず

@RouteConfig([ 
    {path: '/grand-child-3', name: 'GrandChild3', component: GrandChild3Component}, 
    {path: '/grand-child-4', name: 'GrandChild4', component: GrandChild4Component} 
]) 

あるそのRouteConfig離れCHILD1と同じです。

Child1（デフォルト）からChild2にナビゲートしようとすると、何も起こりません。任意のサポート

Answer 1

を事前に

おかげであなたは[「ChildX」]に移動すると、私はそこにデフォルトの壮大な子を必要とするか、あなたが

_this.router.navigate(['Child1', 'GrandChild1']) 

のようにナビゲートするために渡すパラメータに1を指定すると思います