在angular2中呈现不同的模板
我刚刚开始使用angular2并且面临着一些情况来组织我的逻辑。 我实际上是重构backend theme ，它由两个主要组成部分，即login view ，应该出现在页面加载和main dashboard ，将出现在成功login。 我没有main dashboard模板的问题，因为我重构了所有的代码工作正常。 然而，主要的问题是login模块，因为dashboard由sidebar ， header和maincontent区域组成。 我真正的问题是，如何在加载login页面时排除sidebar ， header ，这将成为我的应用程序的起点。 更确切地说，我可以使用独立于dashboard module的login module的布局吗？ 这是我目前的仪表板的代码。 我真的很感激，如果有人可以帮助我以适当的方式构build这个应用程序。
PS我正在使用node作为后端
index.html
<html> <head> <title>Angular 2 QuickStart</title> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <base href="/"> <script src="systemjs.config.js"></script> <script> System.import('app/main').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <parent> Loading... </parent> <!-- START SCRIPTS --> <!-- START PLUGINS --> </body> </html>
app.component.ts
import { Component, NgZone } from '@angular/core'; import { HeaderComponent } from './header/header.component'; import { SidebarComponent } from './sidebar/sidebar.component'; import { AuthComponent } from './auth/auth.component'; import { ListComponent } from './blogs/list.component'; import {RouteConfig, ROUTER_DIRECTIVES, Router, AuxRoute} from '@angular/router-deprecated'; @Component({ selector: 'parent', templateUrl:'app/main.html', directives: [ROUTER_DIRECTIVES, HeaderComponent, SidebarComponent, AuthComponent] }) @RouteConfig([ { path: '/list', name: 'BlogList', component: ListComponent} ]) export class AppComponent { constructor(private _router: Router , private _zone:NgZone){} }
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; bootstrap(AppComponent,[ROUTER_PROVIDERS]); import {NgZone, enableProdMode} from '@angular/core'
main.html
<div class="page-container"> <div class="page-sidebar"> <mysidebar> </mysidebar> </div> <div class="page-content"> <myheader> </myheader> <!-- PAGE CONTENT WRAPPER --> <div class="page-content-wrap"> <router-outlet></router-outlet> </div> </div> </div>
您可以通过使用Service来完成此操作
export class AppComponentService { public showSidebar : boolean = true; public showHeader : boolean = true; }
如果您在bootstrap期间添加此服务：
bootstrap(AppComponent,[ROUTER_PROVIDERS, AppComponentService ]);
你可以注入到你的AppComponent：
export class AppComponent { constructor( private _router: Router, private _zone:NgZone, private _appService: AppComponentService ){} }
并将您的模板更改为：
<div class="page-container"> <div class="page-sidebar"> <mysidebar *ngIf="_appService.showSidebar"> </mysidebar> </div> <div class="page-content"> <myheader *ngIf="_appService.showHeader"> </myheader> <!-- PAGE CONTENT WRAPPER --> <div class="page-content-wrap"> <router-outlet></router-outlet> </div> </div> </div>
在您的LoginComponent您可以注入相同的单例服务，并在routerOnActivate和routerOnDeactivate上使用它：
export class LoginComponent { constructor(private _appService: AppComponentService){} routerOnActivate() : void { this._appService.showSidebar = false; this._appService.showHeader = false; } routerOnDeactivate() : void { this._appService.showSidebar = true; this._appService.showHeader = true; } }