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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
小程序实现列表展开收起效果
Jul 29 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 冒泡排序 交换排序法
2011/05/10 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP整合PayPal支付
2015/06/11 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Django权限设置及验证方式
2020/05/13 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
促销活动策划方案
2014/01/12 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
本科毕业生求职信
2014/06/15 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
党小组推荐意见
2015/06/02 职场文书
让子弹飞观后感
2015/06/11 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
python tkinter模块的简单使用
2021/04/07 Python