一、引言
我们使用ngx-loading，需要在onent.html上写模板，绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件，就需要在每个组件的html重新写模板，这就显得累赘了。在此，我们以ngx-loading为例，展示子组件如何通过service改变app组件中的布尔值loading。
二、实现
1.安装ngx-loading详情点击
npm install --save ngx-loading
2.Import the LoadingModule
import { BrowserModule } from @angular/platform-browser; import { NgModule } from @angular/core; import { CoreModule } from ./core/core.module; import { LoadingModule } from ngx-loading; @NgModule({ //... imports: [ //... LoadingModule ], //... }) export class AppModule { }
3.在onent.html写ngx-loading模板
4.新建一个UtilsService
import {Injectable} from @angular/core; import {Subject} from rxjs/Subject; @Injectable() export class UtilsService { private loadingSource = new Subject(); // 获得一个Observable; loadingObservable = this.loadingSource.asObservable(); // 发射数据，当调用这个方法的时候，Subject就会发射这个数据，所有订阅了这个Subject的Subscription都会接受到结果 // loading true为启用loading,false为关闭loading emitBoolean(loading: boolean) { this.loadingSource.next(loading); } }
5.在app.component.ts使用subscribe来订阅，当数据被发射出来的时候,这里就会接收到结果
import {Component, OnDestroy, OnInit} from @angular/core; import {Subscription} from rxjs/Subscription; import {UtilsService} from ./service/utils.service; @Component({ selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css] }) export class AppComponent implements OnInit, OnDestroy { loading = false; subscription: Subscription; constructor(public utils: UtilsService) { // 使用subscribe来订阅，当数据被发射出来的时候,这里就会接收到结果 this.subscription = this.utils.loadingObservable.subscribe(loading => this.loading = Boolean(loading)); } ngOnInit() { } /* 销毁的时候需要取消订阅，因为订阅之后会一直处于观察者状态,不取消会导致泄露*/ ngOnDestroy() { this.subscription.unsubscribe(); } }
6.在其他子组件需要启用或关闭loading时，只需要一行代码。
constructor( private utils: UtilsService) { } this.utils.emitBoolean(true); // 启用loading this.utils.emitBoolean(false); // 关闭loading
7.额外方法：在子组件注入AppComponent,简单粗暴，但不推荐……
constructor(public appComponent: AppComponent) { } this.appComponent.loading = true; // 启用loading this.appComponent.loading = false; // 关闭loading
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。