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 相关文章推荐
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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 和 HTML
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP数组实例详解
2016/06/26 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
浅谈django 重载str 方法
2020/05/19 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
矫正人员思想汇报
2014/01/08 职场文书
组织鉴定材料
2014/06/02 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
党员思想汇报材料
2014/12/19 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Pandas数据结构之Series的使用
2022/03/31 Python