当前位置: 首页 > 编程笔记 >

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

张腾
2023-03-14
本文向大家介绍Angular5.0 子组件通过service传递值给父组件的方法,包括了Angular5.0 子组件通过service传递值给父组件的方法的使用技巧和注意事项,需要的朋友参考一下

一、引言

我们使用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

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

 类似资料:
  • 本文向大家介绍react 父组件与子组件之间的值传递的方法,包括了react 父组件与子组件之间的值传递的方法的使用技巧和注意事项,需要的朋友参考一下 概念上,组件是封闭的环境。React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事。以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据。 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个

  • 本文向大家介绍vue 子组件向父组件传值方法,包括了vue 子组件向父组件传值方法的使用技巧和注意事项,需要的朋友参考一下 子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 子组件component-a这么写 以上这篇vue 子组件向父组件传值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Vue通过ref父子组件拿值方法,包括了Vue通过ref父子组件拿值方法的使用技巧和注意事项,需要的朋友参考一下 父拿子的值 子拿父的值 有了ref拿值不能更方便~ 以上这篇Vue通过ref父子组件拿值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Vue2.x中的父组件传递数据至子组件的方法,包括了Vue2.x中的父组件传递数据至子组件的方法的使用技巧和注意事项,需要的朋友参考一下 父组件结构 template script 注意的点: •子组件的拼写方式:vGirlGroup写成v-girl-group •这里子组件中的绑定数据是:girls="aGirls",这里的aGirls数据是父组件中的data,girls是要传递至

  • 本文向大家介绍vue给组件传递不同的值方法,包括了vue给组件传递不同的值方法的使用技巧和注意事项,需要的朋友参考一下 这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用。 代码分析: 这里我直接使用了一个Vue的CDN,然后实例化Vue对象就可以使用。

  • 子组件事件能否到传递父组件