一、引言
我们使用ngx-loading,需要在app.component.html上写模板,绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件,就需要在每个组件的html重新写模板,这就显得累赘了。在此,我们以ngx-loading为例,展示子组件如何通过service改变app组件中的布尔值loading。
// app.component.html <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-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.在app.component.html写ngx-loading模板
// app.component.html <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览
- 陈百强《2006世纪10星·永恒篇[环球]》[WAV整轨]
- 【新世纪钢琴】VA-GoldenOctober(Piano)(金秋十月钢琴篇)【FLAC】
- 青稞荞麦《破茧》新生代组合[WAV+CUE]
- 因系统升级后出现BUG 《FF16》PS5完全版宣布延期
- 《黑神话:悟空》周伯通!大佬用左右手分别挑战两只虎先锋
- 《黑神话:悟空》攻击动作致敬《大话西游》:这也太帅了!
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】