Angular2コンポーネントはレンダリングされず、どちらも手動でリンクを入力しても常に親パスに移動します

Question

私はちょうどAngular 2の旅を始めました。私は小さなクライアント管理アプリを見て、クライアントを追加しています。私は3つの他のコンポーネントを動かすことができましたが、新しいコンポーネントでつかまってしまいました。私がこれまで取り組んできた

コンポーネントは次のとおりです。クライアントルートの唯一のテンプレートルータ-出口と

「クライアント」。

"ClientList"コンポーネント。ビューの左側にクライアントのリストをレンダリングします。リストのクライアントが選択されると、ルータはクライアントID page/client/idにナビゲートします。このテンプレートには、「クライアントの追加」ボタンがあり、新しいクライアントの追加を開始します。

"ClientDetail"コンポーネントには、ビューの右側に選択したクライアントの詳細をレンダリングするクライアントの詳細テンプレートがあります。

「ClientNew」コンポーネントがついてきています。私がしたいのは、 "クライアントの追加"をクリックした後、ビューの右側に空白のフォームが読み込まれ、ユーザーがクライアントの詳細を追加できるようになるということです。しかし、 "Add Client"をクリックするたびに、page/client/newが存在しないかのように常に親パスに移ります。

これは私が持っているものです。

Client.routingコンポーネント

import { NgModule }    from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { ClientsComponent }  from './clients.component'; 
import { ClientListComponent}  from './client-list.component'; 
import { ClientDetailComponent } from './client-detail.component'; 
import { ClientDetailResolver } from './client-detail-resolver.service'; 
import { ClientNewComponent } from './client-new.component'; 

const clientRoutes: Routes = [ 
    { 
    path: '', 
    component: ClientsComponent, 
    children: [ 
     { 
     path: '', 
     component: ClientListComponent, 
     children: [ 
      { 
      path: ':id', 
      component: ClientDetailComponent, 
      resolve: { 
       client: ClientDetailResolver 
      } 
      }, 
      { 
      path: 'new', 
      component: ClientNewComponent, 
      } 
     ] 
     }, 
    ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(clientRoutes)], 
    exports: [RouterModule], 
    providers: [ ClientDetailResolver] 
}) 
export class ClientRouting { } 

ClientListコンポーネント

import 'rxjs/add/operator/switchMap'; 
import { Component, OnInit }  from '@angular/core'; 
import { Client }    from './client'; 
import { ClientService }   from './client.service'; 
import { Observable }   from 'rxjs/Observable'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 

@Component({ 
styles: [], 
    template: require('./client-list.component.html') 
}) 

export class ClientListComponent implements OnInit { 
    clients: Observable<Client[]>; 
    selectedId: number; 

constructor(
    private router: Router, 
    private route: ActivatedRoute, 
    private clientService: ClientService) { 
} 

ngOnInit(): void { 
    this.clients = this.route.params 
     .switchMap((params: Params) => { 
     this.selectedId = +params['id']; 
     return this.clientService.getClients(); 
     }); 
    } 

onSelect(client:Client): void { 
    this.selectedId = client.id; 
    this.router.navigate([client.id], { relativeTo: this.route }); 
} 
onSelectNew(): void { 
    console.log(this.router); 
    this.router.navigate(['new'], { relativeTo: this.route }); 
    console.log('test'); 
} 
} 

ClientNewコンポーネント

import { Component, OnInit} from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { Client }   from './client'; 
@Component({ 
    selector: 'new', 
    templateUrl: './client-new.component.html', 
    styles: [] 
}) 

export class ClientNewComponent { 
    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
) {} 

ngOnInit(): void { 
    console.log("Test"); 
    } 
} 

Clients.module

import { NgModule }  from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { NgaModule }  from '../../theme/nga.module'; 

import { ClientRouting } from './clients.routing'; 

import { ClientDetailComponent } from './client-detail.component'; 
import { ClientsComponent }  from './clients.component'; 
import { ClientService }   from './client.service'; 
import { ClientListComponent } from './client-list.component'; 
import { ClientNewComponent } from './client-new.component'; 

@NgModule({ 
    imports:  [CommonModule,FormsModule,NgaModule,ClientRouting], 
    declarations: [ClientsComponent, ClientDetailComponent,ClientHomeComponent, ClientListComponent, ClientNewComponent], 
    providers:[ClientService] 
}) 
export default class ClientsModule {} 

Answer 1

そして、より多くの研究の後、私は、ルーティングでその順序の問題を見つけます。 http://blog.angular-university.io/angular2-router/