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 输入框内容格式验证代码
Feb 11 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
angular.element方法汇总
Jan 07 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP基本语法实例总结
2016/09/09 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
JS模板实现方法
2013/04/03 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
pm2启动ssr失败的解决方法
2019/06/29 Javascript
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
刊首寄语大全
2014/04/11 职场文书
三十年同学聚会感言
2015/07/30 职场文书
工作后的感想
2015/08/07 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js