如何在角度2中创建子路径？

Question

我有一个带有管理页面的项目（请参阅下面的文件结构）。我需要创建一个名为＆＃39; createuser ＆＃39;管理页面（localhost：4200 / admin / createuser）。我尝试了几种方法，但它显示错误（无法找到要加载的主要插座＆＃39; CreateComponent＆＃39;）。所以，我将 router-outlet 添加到我的管理组件html中。现在，路由代码可以正常工作，但管理页面中的html显示在＆＃39; createuser ＆＃39;页。怎么避免呢？或者我错过了什么？

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文件中，以避免此类行为。

您可能忘记将CreateComponent添加到app.module.ts。确保在模块声明中包含CreateComponent。