有一个递归的树视图,但似乎无法让懒惰的加载器微调器显示。 我加载前两个级别,然后根据需要加载其他级别,但是如果我使用[clrLoading],spinner似乎没有显示,如doc示例中所示。 我正在使用0.12.0-beta.4,因为我想将我的工作升级到Ng和Rx 6.我希望升级到支持Ng6的下一个稳定版本。
我的代码正在运行 - 有ng-container标签和一个版本的ng-template注释掉了。如果我使用备用ng-template并添加ng-container标签,我会收到错误“ERROR TypeError:无法获取未定义或空引用的属性'loadingStateChange'”
recursivelocationtree.component.html
<!-- <ng-container [clrLoading]="isLoading"> -->
<clr-tree-node *ngFor="let location of locations$ | async">
<a class="clr-treenode-link" (click)="openModal($event, location)" href="">
<clr-icon *ngIf="location.locationIconName?.length" [attr.shape]=location.locationIconName></clr-icon>
{{location.locationName}}
</a>
<!-- <ng-template *ngIf="location.isParentLocation" [clrLoading]="isLoading" [clrIfExpanded]="treeLevel <= 1"> -->
<ng-template *ngIf="location.isParentLocation" [clrIfExpanded]="treeLevel <= 1">
<recursive-location-tree [parentLocationID]="location.locationID" [treeLevel]="treeLevel" ngProjectAs="clr-tree-node"></recursive-location-tree>
</ng-template>
</clr-tree-node>
<!-- </ng-container> -->
recursivelocationtree.component.ts
import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';
import { DataService, Location } from '../../data.service';
@Component({
selector: 'recursive-location-tree',
templateUrl: './recursivelocationtree.component.html',
styles: []
})
export class RecursiveLocationTreeComponent {
@Input() parentLocationID: number;
@Input() treeLevel: number;
locations$: Observable<Location[]>;
location: Location;
isLoading: boolean = false;
constructor(
public dataService: DataService,
) {
}
ngOnInit() {
this.treeLevel = this.treeLevel+1;
//console.log('RecursiveLocationsTree.init: location '+this.parentLocationID);
//console.log(' level '+this.treeLevel);
this.isLoading = true;
this.locations$ = this.dataService.getLocations$().pipe(
map(x => x.filter(y => y.parentLocationID === this.parentLocationID)),
tap(x => this.isLoading = false)
);
}
}
显示递归组件HTML的页面如下所示。根级别项具有null parentLocation。
<recursive-location-tree [parentLocationID]=null [treeLevel]=0></recursive-location-tree>
位置结构
export interface Location {
locationID: number;
locationName: string;
parentLocationID: number;
isParentLocation: boolean;
locationIconName: string;
}
递归组件也在page.module.ts中定义/声明 如何让惰性装载器微调器工作?