如何创建角度为2的儿童路线？

我有一个与管理页面的项目（请参阅下面的文件结构）。我需要创建一个名为'createuser'的子路由到管理页面（localhost：4200/admin/createuser）。我尝试了几种方法，但显示错误（无法找到主要插口来加载'CreateComponent'）。因此，我将路由器插座添加到我的管理组件html中。现在，路由代码可以工作，但是管理页面的html显示在'createuser'页面中。如何避免这种情况？或者我错过了什么？如何创建角度为2的儿童路线？

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

来源

2017-02-15 Rodney Mathew

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

当你定义一个子路由时，它的行为就像HTML一样。你有你的父母有一些内容，然后通过添加孩子你不删除父母的内容 - 你只是将孩子的内容添加到它的父母。

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

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

来源

2017-02-15 07:00:27

它的工作！谢谢！ –

我很高兴我能够帮助 –

你<router-outlet>应该是你app.component.html文件中，以避免这种行为。

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

来源

2017-02-15 06:52:45

是的，我有他们两个。 ** app.component.html **

和app.module.ts这里：[链接]（https://justpaste.it/154785452358） –

如何创建角度为2的儿童路线？

回答

相关问题