如何在angular 2中创建子管线？

我有一个与管理页面项目（见下面的文件结构）。我需要创建一个名为“createuser”的子路由到管理员页面（localhost:4200/admin/createuser）。我尝试了一些方法，但它显示了一个错误（找不到加载“CreateComponent”的主出口）。所以，我将路由器出口添加到我的管理组件html中。现在，路由代码可以正常工作，但“createuser”页面中会显示来自管理页面的html。如何避免这种情况？还是我错过了什么

管理组件.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(){}
}

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");
    }
}

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);

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>

<h1>Create Component</h1>

app.routing.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(){}
}

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");
    }
}

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);

您的

应该位于

app.component.html

文件中，以避免此类行为

---

您可能忘记将

CreateComponent

添加到

app.module.ts

。确保模块声明中包含CreateComponent。

只需在AdminComponent中添加另一个子路由，它将成为默认路由。然后将AdminComponent的逻辑、样式和视图复制到创建的子路由中，它应该可以正常工作

定义子路由时，它的工作方式有点像HTML。你有你的父母有一些内容，然后通过添加孩子你不是删除父母的内容-你只是添加孩子的内容到它的父母

因此，您的路线应该如下所示：

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

---

是的，我两个都有。app.component.html和app.module.ts在这里：我很高兴能够提供帮助