回文集目錄:JHipster一知半解

組件component目錄

jhi-boolean.component.ts

@Component({
    selector: 'jhi-boolean',
    template: `<span
               [ngClass]="value ? classTrue : classFalse"
               [innerHtml]="value ? textTrue : textFalse">
               </span>`
})

定義了一個span，如果判斷值value為真時，顯示一組class和text，當(dāng)值為假是，顯示另外一組class和text。
實(shí)際上，目前的jhipster工程中，并沒有使用這個組件

jhi-item-count.component.ts

@Component({
    selector: 'jhi-item-count',
    template: `
        <div *ngIf="i18nEnabled; else noI18n" class="info jhi-item-count"
            jhiTranslate="global.item-count"
            translateValues="{{i18nValues()}}"
            [attr.translateValues]="i18nValues()">  /* [attr.translateValues] is used to get entire values in tests */
        </div>
        <ng-template #noI18n class="info jhi-item-count">
            Showing {{((page - 1) * itemsPerPage) == 0 ? 1 : ((page - 1) * itemsPerPage + 1)}} -
            {{(page * itemsPerPage) < total ? (page * itemsPerPage) : total}}
            of {{total}} items.
        </ng-template>`
})

這個就比較復(fù)雜了，用來在page工具上顯示一句話，表明當(dāng)前的查詢情況

此處應(yīng)該有圖。

傳入page，total，itempage，配合翻譯功能，顯示出上圖。
具體在user-management.compoent.html中有使用到

<div class="row justify-content-center">
            <jhi-item-count [page]="page" [total]="queryCount" [itemsPerPage]="itemsPerPage"></jhi-item-count>
        </div>

指令directive目錄

maxbytes.directive.ts，minbytes.directive.ts，number-of-bytes.ts

這三個是一組的，用在form的input驗(yàn)證器上，回首先根據(jù)輸入的base4字符進(jìn)行計(jì)算長度，然后校驗(yàn)是否滿足最大值或者最小值的設(shè)定。
實(shí)際上，目前的jhipster工程中，并沒有使用這個指令

sort.directive.ts，sort-by.directive.ts

這兩個是一組的，sort用在父標(biāo)簽上（一般為tr），有三個傳入值，斷言（排序條件），升/降序，回調(diào)函數(shù)

    @Input() predicate: string;
    @Input() ascending: boolean;
    @Input() callback: Function;

    @Output() predicateChange: EventEmitter<any> = new EventEmitter();
    @Output() ascendingChange: EventEmitter<any> = new EventEmitter();

注意這里用了同名的predicateChange和ascendingChange，這樣就能很方便地已雙向綁定的方式使用

[(predicate)]="predicate" [(ascending)]="reverse"

sort-by相對復(fù)雜,雖然只記錄了一個sort-by變量，但是在其構(gòu)造函數(shù)中有@Host()傳入父標(biāo)簽的是jhiSort指令來，這樣在監(jiān)聽到click事件后，會先調(diào)用其sort()方法，然后再應(yīng)用自己的class變化(applyClass)

@HostListener('click') onClick() {
        if (this.jhiSort.predicate && this.jhiSort.predicate !== '_score') {
            this.jhiSort.sort(this.jhiSortBy);
            this.applyClass();
        }
    }

整理一下排序事件的處理過程：
sort-by監(jiān)聽父標(biāo)簽(sort)的click，調(diào)用其sort方法，傳入自己登記的斷言，sort處理自己的事件，改變升/降序條件后，又調(diào)用callback()方法。
user-management.component.ts傳入的是transition()回調(diào)，它會設(shè)置好請求參數(shù)，調(diào)用loadAll()向后臺請求用戶數(shù)據(jù)。
通過分析可以得知，每次排序，都有一次api的交互，這樣似乎有點(diǎn)浪費(fèi)，做成前端本地排序就行吧。（多頁查詢，只能本頁面排序，邏輯似乎也不大對）