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

2023-09-10 08:16:05 66

一、引言

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

//app.component.html

二、实现

1.安装ngx-loading详情点击

npminstall--savengx-loading

2.ImporttheLoadingModule

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
],
//...
})
exportclassAppModule{}

3.在app.component.html写ngx-loading模板

//app.component.html

4.新建一个UtilsService

import{Injectable}from'@angular/core';
import{Subject}from'rxjs/Subject';

@Injectable()
exportclassUtilsService{

privateloadingSource=newSubject();
//获得一个Observable;
loadingObservable=this.loadingSource.asObservable();

//发射数据，当调用这个方法的时候，Subject就会发射这个数据，所有订阅了这个Subject的Subscription都会接受到结果
//loadingtrue为启用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']
})
exportclassAppComponentimplementsOnInit,OnDestroy{

loading=false;
subscription:Subscription;

constructor(publicutils:UtilsService){
//使用subscribe来订阅，当数据被发射出来的时候,这里就会接收到结果
this.subscription=this.utils.loadingObservable.subscribe(loading=>this.loading=Boolean(loading));
}

ngOnInit(){
}

/*销毁的时候需要取消订阅，因为订阅之后会一直处于观察者状态,不取消会导致泄露*/
ngOnDestroy(){
this.subscription.unsubscribe();
}

}

6.在其他子组件需要启用或关闭loading时，只需要一行代码。

constructor(privateutils:UtilsService){

}
this.utils.emitBoolean(true);//启用loading
this.utils.emitBoolean(false);//关闭loading

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

constructor(publicappComponent:AppComponent){

}
this.appComponent.loading=true;//启用loading
this.appComponent.loading=false;//关闭loading

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

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

热门推荐

随机推荐