WEBAPP开发之JHipster一知半解- 4.6.6 webapp-layout目录-职坐标

WEBAPP开发之JHipster一知半解- 4.6.6 webapp-layout目录

白羽 2018-08-13 来源：网络阅读 969 评论 0

摘要：本文将带你了解WEBAPP开发之JHipster一知半解- 4.6.6 webapp-layout目录，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发之JHipster一知半解- 4.6.6 webapp-layout目录，希望本文对大家学WEBAPP有所帮助。

回文集目录:JHipster一知半解
layout目录并非子模块，因而并没有包含module.ts文件，包含了整个工程的页面切分
main目录
该目录为angular程序的主界面控件，包括主界面划分和标题切换的能力

main.component.ts
其jhi-main为jhi-main，也就是说它会替换掉index里面的angular入口标签内容，加入我们需要的组件内容。

constructor(
privatejhiLanguageHelper:JhiLanguageHelper,
privaterouter:Router
){}
//从路由参数中获得pageTitle的属性值，如果没有就用默认的工程名，
privategetPageTitle(routeSnapshot:ActivatedRouteSnapshot){
lettitle:string=(routeSnapshot.data&&routeSnapshot.data['pageTitle'])?routeSnapshot.data['pageTitle']:'jhipsterSampleApplicationNg2App';
if(routeSnapshot.firstChild){
title=this.getPageTitle(routeSnapshot.firstChild)||title;
}
returntitle;
}

ngOnInit(){
//注册监听路由变化的事件，当NavigationEnd事件才改标题。
this.router.events.subscribe((event)=>{
if(eventinstanceofNavigationEnd){
//注意这里的update最终会调用translative服务，实现多语种支持。
this.jhiLanguageHelper.updateTitle(this.getPageTitle(this.router.routerState.snapshot.root));
}
});
}

整体页面分为3大块，最上面为块，当程序是微服务测试环境时显示，下面为navbar菜单区域。最下面为主体区域，有包含程序主体-部分和foot两小块。
//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)=>{
constdata=res.json();
//构造ProfileInfo结构体。
constpi=newProfileInfo();
pi.activeProfiles=data.activeProfiles;
pi.ribbonEnv=data.ribbonEnv;
pi.inProduction=data.activeProfiles.includes('prod');
pi.swaggerEnabled=data.activeProfiles.includes('swagger');
returnpi;
//http.get是Observable，所以要调用toPromise转换
}).toPromise();
}
returnthis.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比较简单，仅显示“Thisisyourfooter”这么一句话，具体工程应该加上网站地图，备案信息等。

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.title
ErrorPage!
//这里简单用了hidden指令，由于没有其他样式了，这么用倒是没什么问题。
//官方还是推荐用*ngIf，直接从dom树删除，这个比较display:none保险的的多。

Youarenotauthorizedtoaccessthispage.

TODO:附图。
navbar目录
navbar.route.ts
exportconstnavbarRoute: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，菜单就会自动折叠。