Angular5.0 子组件通过service传递值给父组件的方法
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
一、引言
我们使用ngx-loading,需要在app.component.html上写模板,绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件,就需要在每个组件的html重新写模板,这就显得累赘了。在此,我们以ngx-loading为例,展示子组件如何通过service改变app组件中的布尔值loading。
1 2 | // app.component.html < ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ ngx-loading > |
二、实现
1.安装ngx-loading 详情点击
2.Import the LoadingModule
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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模板
1 2 | // app.component.html < ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ ngx-loading > |
4.新建一个UtilsService
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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来订阅,当数据被发射出来的时候,这里就会接收到结果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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时,只需要一行代码。
1 2 3 4 5 | constructor( private utils: UtilsService) { } this .utils.emitBoolean( true ); // 启用loading this .utils.emitBoolean( false ); // 关闭loading |
7.额外方法:在子组件注入AppComponent,简单粗暴,但不推荐……
1 2 3 4 5 | constructor(public appComponent: AppComponent) { } this .appComponent.loading = true ; // 启用loading this .appComponent.loading = false ; // 关闭loading |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
angular 实时监听input框value值的变化触发函数方法
今天小编就为大家分享一篇angular 实时监听input框value值的变化触发函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
这篇文章主要介绍了Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍的相关资料,需要的朋友可以参考下2016-12-12
最新评论