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

 更新时间:2018年07月13日 15:01:25   作者:zhiyu  
这篇文章主要介绍了Angular5.0 子组件通过service传递值给父组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

一、引言

我们使用ngx-loading,需要在app.component.html上写模板,绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件,就需要在每个组件的html重新写模板,这就显得累赘了。在此,我们以ngx-loading为例,展示子组件如何通过service改变app组件中的布尔值loading。

1
2
// app.component.html
 <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

二、实现

1.安装ngx-loading 详情点击

1
npm install --save ngx-loading

2.Import the LoadingModule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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模板

1
2
// app.component.html
 <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

4.新建一个UtilsService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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来订阅,当数据被发射出来的时候,这里就会接收到结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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时,只需要一行代码。

1
2
3
4
5
constructor( private utils: UtilsService) {
 
       }
this.utils.emitBoolean(true); // 启用loading
this.utils.emitBoolean(false); // 关闭loading

7.额外方法:在子组件注入AppComponent,简单粗暴,但不推荐……

1
2
3
4
5
constructor(public appComponent: AppComponent) {
   
 }
this.appComponent.loading = true; // 启用loading
this.appComponent.loading = false; // 关闭loading

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://segmentfault.com/a/1190000015619404

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论