角度2で子ルートを作成する方法は？

Question

私は管理ページ（下のファイル構造を参照）でプロジェクトを持っています。管理者ページ（localhost：4200/admin/createuser）に、「createuser」という子ルートを作成する必要があります。いくつかの方法を試しましたが、エラーが表示されます（ 'CreateComponent'を読み込むためのプライマリコンセントが見つかりません）。そこで、ルーターアウトレットを管理コンポーネントhtmlに追加しました。今、ルーティングコードは動作しますが、adminページのhtmlは 'createuser'ページに表示されています。それを避ける方法は？または私は何かを逃したことがありますか？

admin.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'admin', 
    templateUrl: 'admin.component.html' 
}) 

export class AdminComponent implements OnInit 
{ 
    constructor(){} 
    ngOnInit(){} 
} 

admin.component.html

<router-outlet></router-outlet> 
<div class="logo" style="background-color: #fbc111"> 
    <img src="../../../assets/lbtrackerlogo.png" style="width: 250px;padding: 15px"> 
    <button class="btn btn-default" routerLink="create" style="position: absolute;top:25px;left: 80%">Create Agency</button> 
</div> 

create.component.html

<h1>Create Component</h1> 

create.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2'; 
import { Router } from '@angular/router'; 
import { UUIDService } from '../../../services/uuid.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'create', 
    templateUrl: 'create.component.html' 
}) 
export class CreateComponent implements OnInit 
{ 
    constructor() { } 

    ngOnInit() 
    { 
     console.log("In Create component"); 
    } 
} 

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { LoginComponent } from './components/login/login.component'; 
import { AdminComponent } from './components/admin/admin.component'; 
import { CreateComponent } from './components/admin/create/create.component'; 

import { AuthGuard } from './auth.service'; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     component: LoginComponent 
    }, 
    { 
     path: 'login', 
     component: LoginComponent 
    }, 
    { 
     path: 'admin', 
     component: AdminComponent, 
     canActivate: [AuthGuard], 
     data: { roles: ['admin'] }, 
     children: [ 
      { 
       path: 'create', 
       component: CreateComponent 
      } 
     ] 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

Answer 1

AdminComponent内に別の子ルートを追加するだけで、デフォルトのルートになります。 AdminComponentのロジック、スタイル、ビューを作成した子ルートにコピーするよりもうまくいくはずです。

子ルートを定義すると、HTMLのように動作します。あなたは親のコンテンツを削除していない子を追加することで、親のコンテンツを追加しています。親のコンテンツを追加するだけです。

だからしているルートは次のようになります。はい、私はそれらの両方を持っている

Admin - /admin - redirects to AdminDefaultController by default 
    AdminDefaultController - /admin/dashborad 
    AdminCreateController - /admin/create 

Answer 2

あなた<router-outlet>は行動のようなものを避けるために、あなたのapp.component.htmlファイル内にある必要があります。

app.module.tsにCreateComponentを追加することを忘れている可能性があります。モジュール宣言の中にCreateComponentがあることを確認してください。