JHipster一知半解- 4.6.9 webapp-home目

回文集目录:JHipster一知半解

该目录包含了首页的显示内容，是最简单的一个子模块。

home.module.ts

@NgModule({
    //引入共享模块，并且初始化HOME_ROUTE，由于HOME_ROUTE的path是''，所以默认会加载这个页面进来。
    imports: [
        JhipsterSampleApplicationNg2SharedModule,
        RouterModule.forChild([ HOME_ROUTE ])
    ],
    //声明主页组件
    declarations: [
        HomeComponent,
    ],
    entryComponents: [
    ],
    providers: [
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterSampleApplicationNg2HomeModule {}

HomeComponent组件

export class HomeComponent implements OnInit {
    account: Account;
    modalRef: NgbModalRef;
    //构造器，注入principal服务，loginModalService登录框服务，eventManager实际管理
    constructor(
        private principal: Principal,
        private loginModalService: LoginModalService,
        private eventManager: JhiEventManager
    ) {
    }
    //判断是否用户已登录，如
    ngOnInit() {
        this.principal.identity().then((account) => {
            this.account = account;
        });
        this.registerAuthenticationSuccess();
    }
    //向eventManager注册用户注册成功的消息
    registerAuthenticationSuccess() {
        this.eventManager.subscribe('authenticationSuccess', (message) => {
            this.principal.identity().then((account) => {
                this.account = account;
            });
        });
    }
    //判断用户是否已经登录
    isAuthenticated() {
        return this.principal.isAuthenticated();
    }
    //显示登录框
    login() {
        this.modalRef = this.loginModalService.open();
    }
}

home.component.html

<div class="row">
    <!-- 这里显示Jhipster的大叔图像，占3格 -->
    <div class="col-md-3">
        <span class="hipster img-fluid rounded"></span>
    </div>
    <!-- 主体内容，占9格 -->
    <div class="col-md-9">
        <!-- 所有的语言都是可翻译的，大量使用 jhiTranslate 指令-->
        <h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1>
        <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>
        <!-- 判断登录情况 -->
        <div [ngSwitch]="isAuthenticated()">
            <!-- 已登录显示登录用户信息 -->
            <div class="alert alert-success" *ngSwitchCase="true">
                <span *ngIf="account" jhiTranslate="home.logged.message" translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span>
            </div>
            <!-- 未登录显示登录按钮 -->
            <div class="alert alert-warning" *ngSwitchCase="false">
                <span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
                <a class="alert-link" (click)="login()" jhiTranslate="global.messages.info.authenticated.link">sign in</a><span jhiTranslate="global.messages.info.authenticated.suffix">, you can try the default accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and password="user").</span>
            </div>
             <!-- 未登录显示注册按钮 -->
            <div class="alert alert-warning" *ngSwitchCase="false">
                <span jhiTranslate="global.messages.info.register.noaccount">You don't have an account yet?</span>
                <a class="alert-link" routerLink="register" jhiTranslate="global.messages.info.register.link">Register a new account</a>
            </div>
        </div>

        <p jhiTranslate="home.question">
            If you have any question on JHipster:
        </p>
        <!-- 显示固定的资源列表 -->
        <ul>
            <li><a href="http://www.jhipster.tech/" target="_blank" rel="noopener" jhiTranslate="home.link.homepage">JHipster homepage</a></li>
            <li><a href="http://stackoverflow.com/tags/jhipster/info" target="_blank" rel="noopener" jhiTranslate="home.link.stackoverflow">JHipster on Stack Overflow</a></li>
            <li><a href="https://github.com/jhipster/generator-jhipster/issues?state=open" target="_blank" rel="noopener" jhiTranslate="home.link.bugtracker">JHipster bug tracker</a></li>
            <li><a href="https://gitter.im/jhipster/generator-jhipster" target="_blank" rel="noopener" jhiTranslate="home.link.chat">JHipster public chat room</a></li>
            <li><a href="https://twitter.com/java_hipster" target="_blank" rel="noopener" jhiTranslate="home.link.follow">follow @java_hipster on Twitter</a></li>
        </ul>
        <!-- 显示github链接-->
        <p>
            <span jhiTranslate="home.like">If you like JHipster, don't forget to give us a star on</span> <a href="https://github.com/jhipster/generator-jhipster" target="_blank" rel="noopener" jhiTranslate="home.github">GitHub</a>!
        </p>
    </div>
</div>