回文集目录:JHipster一知半解
layout目录并非子模块，因而并没有包含module.ts文件，包含了整个工程的页面切分
main目录
该目录为angular程序的主界面控件，包括主界面划分和标题切换的能力
main.component.ts
其jhi-main为jhi-main，也就是说它会替换掉index里面的angular入口标签内容，加入我们需要的组件内容。
constructor(
private jhiLanguageHelper: JhiLanguageHelper,
private router: Router
) {}
//从路由参数中获得pageTitle的属性值，如果没有就用默认的工程名，
private getPageTitle(routeSnapshot: ActivatedRouteSnapshot) {
let title: string = (routeSnapshot.data && routeSnapshot.data['pageTitle']) ? routeSnapshot.data['pageTitle'] : 'jhipsterSampleApplicationNg2App';
if (routeSnapshot.firstChild) {
title = this.getPageTitle(routeSnapshot.firstChild) || title;
}
return title;
}
ngOnInit() {
//注册监听路由变化的事件，当NavigationEnd事件才改标题。
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
//注意这里的update最终会调用translative服务，实现多语种支持。
this.jhiLanguageHelper.updateTitle(this.getPageTitle(this.router.routerState.snapshot.root));
}
});
}
main.component.html
整体页面分为3大块，最上面为
//TODO:页面的布局图，主界面画框
profiles目录
标签，根据从后端获取的profile，决定是否显示信息。
profile.service.ts
与后端api/profile-info进行交互，获取后端服务的profile信息
//返回一个Promise
getProfileInfo(): Promise {
if (!this.profileInfo) {
//直接调用http.get方法通讯。
this.profileInfo = this.http.get(this.profileInfoUrl)
.map((res: Response) => {
const data = res.json();
//构造ProfileInfo结构体。
const pi = new ProfileInfo();
pi.activeProfiles = data.activeProfiles;
pi.ribbonEnv = data.ribbonEnv;
pi.inProduction = data.activeProfiles.includes('prod');
pi.swaggerEnabled = data.activeProfiles.includes('swagger');
return pi;
//http.get是Observable，所以要调用toPromise转换
}).toPromise();
}
return this.profileInfo;
}
page-ribbon.component.ts
//在Init时就获取Profile，也就是说，在打开页面必然加载，也就是说必然会调用profileService与后台交互，获取ProfileInfo
ngOnInit() {
this.profileService.getProfileInfo().then((profileInfo) => {
this.profileInfo = profileInfo;
this.ribbonEnv = profileInfo.ribbonEnv;
});
}
footer目录
footer.component.html和footer.component.ts比较简单，仅显示“This is your footer”这么一句话，具体工程应该加上网站地图，备案信息等。
error目录
error.route.ts
定义出现错误时候的路由地址，error和accessdenied两个url都会跳转到这个统一的提示页面ErrorComponent，唯一区别是accessdenied时候，route的data增加了一个error403: true的属性。
error.component.ts
ngOnInit() {
//从路由里面获取data，并把error403属性和errorMessage赋值到自己组件里面的属性中。
this.route.data.subscribe((routeData) => {
if (routeData.error403) {
this.error403 = routeData.error403;
}
if (routeData.errorMessage) {
this.errorMessage = routeData.errorMessage;
}
});
}
error.component.html
//翻译error.title
Error Page!
//这里简单用了hidden指令，由于没有其他样式了，这么用倒是没什么问题。
//官方还是推荐用*ngIf，直接从dom树删除，这个比较display:none保险的的多。
{{errorMessage}}
You are not authorized to access this page.
TODO:附图。
navbar目录
navbar.route.ts
export const navbarRoute: Route = {
path: '',
component: NavbarComponent,
outlet: 'navbar'
};
注意：这里指定了Route的outlet，注意就和main.component.html里面的对应起来了。
active-menu.directive.ts
定义了jhiActiveMenu属性指令，用来作为激活语种的辅助指令。默认菜单的激活状态是routerLinkActive根据url进行判断的，但是语种的选择与激活是与url无关的，因此必须自己判断那一个语种是激活的。
核心代码为updateActivFlag()方法
updateActiveFlag(selectedLanguage) {
if (this.jhiActiveMenu === selectedLanguage) {
this.renderer.setElementClass(this.el.nativeElement, 'active', true);
} else {
this.renderer.setElementClass(this.el.nativeElement, 'active', false);
}
}
就是给属性的标签元素上增加或者删除'active'属性。
navbar.component组件
NavbarComponent不仅仅展示菜单外观，还包含不需要路由转换的一些动作语言转换的动作。登录，登出，语种切换。
navbar.component.html就是一个相当标准的ngbMenu的html文件了。如果窗口768px，菜单就会自动折叠。