Angular 以角度6显示微调器直到API响应

我是Angular 6的新手，以前没有任何Angular版本的经验&使用Angular 6创建我的网站，在其中我必须显示微调器，直到API响应挂起。我使用Angular 6的httpclient调用API。我想为每个API请求显示spinner。我继续搜索，但没有找到问题的答案。下面是我的组件和服务文件

/* data.services.ts */

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  } 
}

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })

export class UsersComponent implements OnInit {
  users$: Object;
  constructor(private data: DataService) { }
  ngOnInit() {
    this.data.getUsers().subscribe(data => {
      this.users$ = data; 
    });
  }
}

注意：我不想为此使用任何软件包或模块。

有人能帮我解决这个问题吗？任何帮助都将不胜感激。

您可以使用

执行

npm i ng4加载微调器--save

将模块导入到应用程序根模块

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

办理进口报关单

 imports: [ Ng4LoadingSpinnerModule.forRoot() ]

将微调器组件包括到根级组件中

<ng4-loading-spinner> </ng4-loading-spinner>

---

看看我的包ngx RxCache。处理加载是关键用例之一。安装ngx rxcache。不要订阅TypeScript中的Observable，在视图中使用异步管道。查看演示在

从中获取加载动画，将其放入html的加载部分

/* data.services.ts */

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RxCacheService } from 'ngx-rxcache';
import { User } from 'path to user interface definition';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient, private cache: RxCacheService) { }
  load() {
    this.usersCacheItem.load();
  }

  private usersCacheItem = this.cache.get<User[]>({
      id: '[User] users',
      construct: () => this.http.get<User[]>('https://jsonplaceholder.typicode.com/users')
    });

    users$ = this.usersCacheItem.value$;
    loading$ = this.usersCacheItem.loading$;
}

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })

export class UsersComponent implements OnInit {
  users$: this.data.users$;
  loading$: this.data.loading$;
  constructor(private data: DataService) {
    data.load();
  }
}

/* data.services.ts */

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  } 
}

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })

export class UsersComponent implements OnInit {
  users: Object; // <-- Do not use $ at the end of a variable unless it is an observable
  loading = true;
  constructor(private data: DataService) { }
  ngOnInit() {

    this.data.getUsers().subscribe(data => {
      this.users = data;
      this.loading = false;
    });
  }
}

<div *ngIf="loading else loaded">
    loading ...
</div>

<ng-template #loaded>
    <div *ngFor="let user of users">{{user.name}}</div>
</ng-template>

/*data.services.ts*/
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“ngx rxcache”导入{RxCacheService}；
从“用户界面定义路径”导入{User}；
@注射的({
providedIn:'根'
})
导出类数据服务{
构造函数（私有http:HttpClient，私有缓存：RxCacheService）{}
加载（）{
this.usersCacheItem.load（）；
}
private usersCacheItem=this.cache.get({
id:“[用户]用户”，
构造：（）=>this.http.get（'https://jsonplaceholder.typicode.com/users')
});
users$=this.usersCacheItem.value$；
加载$=this.usersCacheItem.loading$；
}
/*users.component.ts*
从“@angular/core”导入{Component，OnInit}；
从“../data.service”导入{DataService}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序用户”，
templateUrl:'./users.component.html'，
样式URL:['./users.component.css']
})
导出类UsersComponent实现OnInit{
users$：this.data.users$；
loading$：this.data.loading$；
构造函数（私有数据：DataService）{
data.load（）；
}
}

加载。。。
{{item}}

如果您坚持不安装任何软件包，请使用布尔标志告知加载是否已完成

从中获取加载动画，将其放入html的加载部分

/* data.services.ts */

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RxCacheService } from 'ngx-rxcache';
import { User } from 'path to user interface definition';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient, private cache: RxCacheService) { }
  load() {
    this.usersCacheItem.load();
  }

  private usersCacheItem = this.cache.get<User[]>({
      id: '[User] users',
      construct: () => this.http.get<User[]>('https://jsonplaceholder.typicode.com/users')
    });

    users$ = this.usersCacheItem.value$;
    loading$ = this.usersCacheItem.loading$;
}

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })

export class UsersComponent implements OnInit {
  users$: this.data.users$;
  loading$: this.data.loading$;
  constructor(private data: DataService) {
    data.load();
  }
}

/* data.services.ts */

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  } 
}

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })

export class UsersComponent implements OnInit {
  users: Object; // <-- Do not use $ at the end of a variable unless it is an observable
  loading = true;
  constructor(private data: DataService) { }
  ngOnInit() {

    this.data.getUsers().subscribe(data => {
      this.users = data;
      this.loading = false;
    });
  }
}

<div *ngIf="loading else loaded">
    loading ...
</div>

<ng-template #loaded>
    <div *ngFor="let user of users">{{user.name}}</div>
</ng-template>

/*data.services.ts*/
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
导出类数据服务{
构造函数（私有http:HttpClient）{}
getUsers（）{
返回此.http.get（'https://jsonplaceholder.typicode.com/users')
} 
}
/*users.component.ts*
从“@angular/core”导入{Component，OnInit}；
从“../data.service”导入{DataService}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序用户”，
templateUrl:'./users.component.html'，
样式URL:['./users.component.css']
})
导出类UsersComponent实现OnInit{
用户：对象；//{
这个用户=数据；
这一点：加载=错误；
});
}
}
加载。。。
{{user.name}

为此，我将使用http拦截器在http请求期间检查某些事件。 让我们有一个组件，它将有一些加载器，并将该组件放在同一级别上，如路由器出口或应用程序组件。 从我们的拦截器，我们将与服务通信，告诉我们的组件何时显示加载器或不显示加载器

有一个简单的例子：

---

您可以将订阅上的引用存储为用户组件属性，然后在模板中使用简单的*ngIf来显示/隐藏加载指示器：

/* users.component.ts *

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users$: Object;
  subscription: Subscription

  constructor(private data: DataService) { }

  ngOnInit() {
    this.subscription = this.data.getUsers().subscribe(data => {
      this.users$ = data; 
    });
  }
}

在模板中：

...
<div *ngIf="!subscription?.closed">loading...</div>
...

。。。
加载。。。
...

有关Subscription类的更多信息，请参阅

这超出了这个问题的范围，但您还应该检查组件销毁时订阅是否已关闭（因此保留对订阅的引用可能会有所帮助）：例如，在ngondstroy（）中调用subscription.unsubscribe（），或者为此从基类扩展（因此，您的所有组件都可以从中受益）

---

请参阅或

我不想使用任何模块。我只想使用简单的方法。Angular没有内置微调器，您可以使用前面的微调器，也可以使用Angular的材质，或者使用答案中提供的材质。其他祝您创建自定义微调器好运：）@Viaks我有gif图像。我只需要逻辑。然后可以很容易地使用

*ngIf

有条件地显示和隐藏喷丝头。请编辑我的代码。我不知道angular的基本功能，我不想使用任何模块。我只想要简单的方法。使用ngx RxCache是非常简单的。手动滚动您自己的解决方案不是简单的方法。为什么您会反对安装模块？拥有一个处理您的状态管理的模块将大大提高您的生产率。这是因为在继续高级主题之前，我只想了解angular 6的基本功能。@Rajat也许这就是您正在寻找的内容，上面的ng模板是什么？带有ngIf的div是您加载的地方spinner，ng模板是您放置用户的地方，它是加载标志从true变为False时显示的内容。还有一个问题，我可以使用简单方法代替ng模板吗？在此处显示spinner在此处显示用户