Ionic 4正确的方式显示正在加载，没有记录和数据块 [英] Ionic 4 Correct way to show Loading, No records and data block

问题描述

这是问题所在.我的应用程序中几乎所有页面都有三种状态.1.加载(我要在页面内显示微调器的位置，为此我已经创建了一个组件)2.未找到任何记录(图像位于页面中心，我也有相应的组件)3.数据加载和我的实际内容没有任何可能使设计混乱的包装.

Here's the problem. I have three states of almost all the pages in my app. 1. Loading (where I want to show spinner within the page and for that I have created a component already) 2. No Records Found ( An image in center of the page and I have a component for this as well ) 3. Data loading and my actual content without any wrapper around that which can mess up the design.

那是我目前正在做的事情，在每个页面上看起来都不太好.

Thats how I am doing this currently which doesnt look great on every page.

<app-spinner *ngIf="!data; else page_content"></app-spinner>
<ng-template #page_content>
<ng-container *ngIf="data.length; else no_record">
My Content goes here
</ng-container>
</ng-template>
<ng-template #no_record><app-no-record></app-no-record></ng-template>

我可以做的另一种方法是，但是我不想一次又一次地重复检查.

Another way I can do is this but I dont want to repeat my checks again and again.

<app-spinner *ngIf="!data;"></app-spinner>
<app-no-record *ngIf="data && !data.length;"></app-no-record>
<ng-container *ngIf="data && data.length"></ng-container>

是否还有其他方法可以实现相同的功能，但使用更好的代码.谢谢

Is there any other way I can achieve this same functionality but with better looking code. Thanks

推荐答案

广告:这是Angular中的一种响应(我想这可能是Ionic的灵感)

Advertisement: This is a response in Angular (I suppose can be inspiration for Ionic)

您可以创建一个运算符，请参见

You can create an operator, see this SO

好吧，将运算符更改为在开始加载时发送1，如果在没有数据的情况下完成则发送-1，而在没有数据的情况下完成发送0:

Well, change the operator to send 1 when start loading, -1 if finalize without no data and 0 if finalize with data:

操作员:

export const prepare = <T>(callback: () => void) => {
    return (source: Observable<T>): Observable<T> =>
        defer(() => {
            callback();
            return source;
        });
};

export const indicate = <T>(indicator: Subject<any>) => {
    let alive = true;
  let noData=false;
    return (source: Observable<T>): Observable<T> =>
        source.pipe(
            prepare(() =>
                timer(500)
                    .pipe(
                        takeWhile(() => alive),
                        take(1)
                    )
                    .subscribe(() => {
                        indicator.next(1);
                    })
            ),
      tap(res=>{
        noData=(!res || (Array.isArray(res) && res.length<=0))
      }),
            finalize(() => {
                alive = false;
                indicator.next(noData?-1:0);
            })
        );
};

export const toClass = <T>(ClassType: { new(): T }) => (
    source: Observable<T>
) => source.pipe(map(val => Object.assign(new ClassType(), val)));

加载组件:

@Component({
  selector: 'app-loading',
  template:`
  <div *ngIf="dataService.loading$ | async as response">
    <div class="modal" (click)="dataService.loading$.next(0)">
        <div class="modal-content">
            <p *ngIf="response==1">Loading...</p>
            <p *ngIf="response==-1">Empty</p>
        </div>
    </div>
</div>
  `,
  styleUrls: [ './loading.component.css' ]
})
export class LoadingComponent  {
  constructor(public dataService:DataService){}
}

查看如何使用 dataService.loading $ .next(0)关闭模态，以及如何在构造函数中将dataService声明为公共

See how close the modal using dataService.loading$.next(0) and how I declared as public my dataService in the constructor

我为使用做一个简单的例子

I make a simple example of use

<button (click)="loadData()">load</button>
<div>
    {{data}}
</div>
<app-loading></app-loading>

和一个模拟呼叫的简单服务，返回随机null或日期时间

And a simple service that simulate a call, return random null or the date time

export class DataService {
  loading$ = new Subject<any>()
  getData():Observable<any>
  {
    const observable=of(Math.random()<.5?
              'New Data at '+new Date():
               null
    ).pipe(delay(1000))

    return observable.pipe(
      indicate(this.loading$))
  }
}

您可以看到 stackblitz ，您会看到正在加载"，然后，有时您会看到它为空，而有时会关闭正在加载".

You can see the stackblitz, You see the "loading", then, some times you'll see that is empty, and another time the "loading" close.

这篇关于Ionic 4正确的方式显示正在加载，没有记录和数据块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！