Angular2 管理后台架构

Question

鄙人正在入手 Angular2，在学习与实践的过程中，遇到了一个头疼的问题。

---

项目类型：管理后台
框架及工具：Angular2，Angular CLI

简要描述： 登录表单 SignInComponent 与 控制面板 DashboardComponent 是两个独立的 组件 Component。这两个组件都导入到 主组件 AppComponent.

文件目录：

project
|—— src
|———— app
|—————— dashboard
|———————— dashboard.component.html
|———————— dashboard.component.spec.ts
|———————— dashboard.component.ts
|———————— index.ts
|—————— sign-in
|———————— sign-in.component.html
|———————— sign-in.component.spec.ts
|———————— sign-in.component.ts
|———————— index.ts
|—————— +example-a
|———————— example-a.component.html
|———————— example-a.component.spec.ts
|———————— example-a.component.ts
|———————— index.ts
|—————— +example-b
|———————— example-b.component.html
|———————— example-b.component.spec.ts
|———————— example-b.component.ts
|———————— index.ts
|—————— app.component.html
|—————— app.component.spec.ts
|—————— app.component.ts
|—————— app.routes.ts
|———— index.html
|———— main.ts
|———— system-config.ts
|—— angular-cli.json
|—— angular-cli-build.js

// 主组件 app.component.ts

import { Component,OnInit } from '@angular/core';
import { DashboardComponent } from 'dashboard/dashboard.component';
import { SignInComponent } from 'sign-in/sign-in.component';

@Component({
  moduleId: module.id,
  selector: 'admin-app',
  templateUrl: 'admin.component.html',
  directives: [DashboardComponent,SignInComponent]
})
......

// 主组件 app.component.html

<app-sign-in *ngIf="!loggedIn"></app-sign-in>
<app-dashboard *ngIf="loggedIn"></app-dashboard>

其中，控制面板组件包含路由。

// 控制面板组件 dashboard.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-dashboard',
  templateUrl: 'dashboard.component.html',
  directives:[ROUTER_DIRECTIVES]
})
......

// dashboard.component.html

<div class="container">
    <router-outlet></router-outlet>
</div>

路由控制器 AppRouterProviders

// 路由控制器 app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { ExampleAComponent } from './+example-a/example-a.component';
import { ExampleBComponent } from './+example-b/example-b.component';

export const routes: RouterConfig = [
  {path:'',redirectTo:'/developer',pathMatch:'full'},
  {path:'ea',component:ExampleAComponent},
  {path:'/eb',component:ExampleBComponent}
];

export const AdminOpenUlucuRouterProviders = [
  provideRouter(routes)
];

可是，路由控制器 AppRouterProviders 是导入到 main.ts中的。

// main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent, environment } from './app/';
import { AppRouterProviders } from './app/app.routes';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent,[
  disableDeprecatedForms(),
  provideForms(),
  HTTP_PROVIDERS,
  AppRouterProviders
]).catch((err: any) => console.error(err));

希望实现的效果：
在 主组件 AppComponent 中通过 字段 loggedIn 来切换显示 登录表单 SignInComponent 与 控制面板 DashboardComponent。

---

请各路大家出手相助，答疑解惑。

Answer 1

这个可以关注下的写的ng2的后台管理系统页面，https://github.com/332557712/cc