JHipster一知半解- 4.5.2 ng-jhipster 组件,指令(基于0.3.4)

回文集目录: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，当值为假是，显示另外一组class和text。
实际上，目前的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>`
})

这个就比较复杂了，用来在page工具上显示一句话，表明当前的查询情况

此处应该有图。

传入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验证器上，回首先根据输入的base4字符进行计算长度，然后校验是否满足最大值或者最小值的设定。
实际上，目前的jhipster工程中，并没有使用这个指令

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

这两个是一组的，sort用在父标签上（一般为tr），有三个传入值，断言（排序条件），升/降序，回调函数

    @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相对复杂,虽然只记录了一个sort-by变量，但是在其构造函数中有@Host()传入父标签的是jhiSort指令来，这样在监听到click事件后，会先调用其sort()方法，然后再应用自己的class变化(applyClass)

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

整理一下排序事件的处理过程：
sort-by监听父标签(sort)的click，调用其sort方法，传入自己登记的断言，sort处理自己的事件，改变升/降序条件后，又调用callback()方法。
user-management.component.ts传入的是transition()回调，它会设置好请求参数，调用loadAll()向后台请求用户数据。
通过分析可以得知，每次排序，都有一次api的交互，这样似乎有点浪费，做成前端本地排序就行吧。（多页查询，只能本页面排序，逻辑似乎也不大对）

最后编辑于：2018.06.13 20:57:34