Angular5.0 子组件通过service传递值给父组件的方法


Posted in Javascript onJuly 13, 2018

一、引言

我们使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Vue实现双向数据绑定
May 03 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现组件之间传值功能示例
Jul 13 #Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 #Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 #Javascript
JS实现select选中option触发事件操作示例
Jul 13 #Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 #Javascript
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
python中的装饰器详解
2015/04/13 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python while true实现爬虫定时任务
2020/06/08 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
好书伴我成长演讲稿
2014/05/14 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
村创先争优活动总结
2014/08/28 职场文书
争先创优演讲稿
2014/09/15 职场文书