如何在 Angular 2 中创建子路线？答案

【问题标题】：How to create a child route in angular 2?如何在 Angular 2 中创建子路线？
【发布时间】：2017-02-15 06:35:12
【问题描述】：

我有一个带有管理页面的项目（请参阅下面的文件结构）。我需要创建一个名为 'createuser' 的子路由到管理页面 (localhost:4200/admin/createuser)。我尝试了几种方法，但它显示错误（找不到加载“CreateComponent”的主要出口）。因此，我将 router-outlet 添加到我的管理组件 html 中。现在，路由代码有效，但管理页面中的 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);

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案1】：

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

当您定义子路由时，它的工作方式类似于 HTML。您的父母有一些内容，然后通过添加孩子，您并没有删除父母的内容 - 您只是将孩子的内容添加到它的父母。

所以你的路线应该是这样的：

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

【讨论】：

很高兴我能提供帮助

【解决方案2】：

您的<router-outlet> 应该在您的app.component.html 文件中以避免这种行为。

您可能忘记将CreateComponent 添加到您的app.module.ts。确保你的模块声明中有 CreateComponent。

【讨论】：

是的，我两个都有。 app.component.html

和 app.module.ts 这里：link