typescript 如何在角度应用程序中包含加载微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48919800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include a loading spinner in an angular application?
提问by Steve Doson
I am trying to add a spinner to my application but the spinner is not appearing.
我正在尝试向我的应用程序添加一个微调器，但微调器没有出现。
There are no errors appearing in the console or terminal, yet the spinner is not appearing.
控制台或终端中没有出现错误，但微调器没有出现。
loader.service.ts
loader.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
display(value: boolean) {
this.status.next(value);
}
}
app.module.ts
app.module.ts
imported LoadService and added it to the providers array
导入 LoadService 并将其添加到 providers 数组
app.component.ts
app.component.ts
import { LoaderService } from './services/loader.service';
export class AppComponent {
//for the spinner
showLoader: boolean;
//LoaderService is for the spinner
constructor(private loaderService: LoaderService) { }
//for the spinner
ngOnInit() {
this.loaderService.status.subscribe((val: boolean) => {
this.showLoader = val;
});
}
}
app.component.html
应用程序组件.html
<router-outlet>
<div *ngIf="showLoader">
<mat-spinner></mat-spinner>
</div>
</router-outlet>
custom.component.ts
custom.component.ts
import { LoaderService } from '../services/loader.service';
export class SurveyresultsComponent implements OnInit {
constructor(private loaderService: LoaderService) { }
ngOnInit() {
//http call starts
this.loaderService.display(true);
//http call ends
this.loaderService.display(false);
}
}
回答by Hrishikesh Kale
I think you are calling your loader service in wrong way.
我认为您以错误的方式调用加载程序服务。
your loader code logic is
您的加载程序代码逻辑是
this.loaderService.display(true);
//http call ends
this.loaderService.display(false);
written in custom.component.ts and your HTML code for that is written in app.component.html
写在 custom.component.ts 中，你的 HTML 代码写在 app.component.html
try using the same HTML code in custom.component.html or try adding
尝试在 custom.component.html 中使用相同的 HTML 代码或尝试添加
this.loaderService.display(true);
//http call ends
this.loaderService.display(false);
this logic in app.component.ts or else you could print showLoader value besides that div in app.component.html like {{showLoader}}
app.component.ts 中的这个逻辑，否则你可以打印除了 app.component.html 中的那个 div 之外的 showLoader 值，比如 {{showLoader}}
回答by aCiD
Looks like a scope issue. An instance of the AppComponent must be available for the subscribe function to use the component's variables. 'this' refers to the scope of the subscribe function.
看起来像一个范围问题。AppComponent 的实例必须可供订阅函数使用才能使用组件的变量。“this”指的是订阅功能的范围。
export class AppComponent {
//for the spinner
showLoader: boolean;
//LoaderService is for the spinner
constructor(private loaderService: LoaderService) { }
//for the spinner
ngOnInit() {
let self=this;
this.loaderService.status.subscribe((val: boolean) => {
self.showLoader = val;
});
}
}
回答by Tushar Adlakha
In your Custom.component.ts class, you are calling below 2 statements one after the another, instead you have to use timeout
在您的 Custom.component.ts 类中，您一个接一个地调用以下 2 个语句，而必须使用 timeout
ngOnInit() {
//http call starts
this.loaderService.display(true);
//http call ends
setTimeout(() => {
this.loaderService.display(false);
},5000);
}
By executing this block, spinner will displayed for 5 Seconds.
通过执行此块，微调器将显示 5 秒。
You can also use ngx-Spinner (https://www.youtube.com/watch?v=5wzn5HDq0rk&)
您还可以使用 ngx-Spinner ( https://www.youtube.com/watch?v=5wzn5HDq0rk&)
