Angular 5.0 学习10：子组件通过service传递值给父组件

2024年1月11日 150次阅读 来源: zhiyu

一、引言

我们使用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
    原文作者：zhiyu
    原文地址: https://segmentfault.com/a/1190000015619404
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞