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 相关文章推荐
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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实现与ASP Banner组件相似的类
2006/10/09 PHP
一个简单的php路由类
2016/05/29 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
高一生物教学反思
2014/01/17 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis