189 8069 5689
这篇文章主要为大家展示了“Angular5.0 子组件如何通过service传递值给父组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular5.0 子组件如何通过service传递值给父组件”这篇文章吧。
创新互联公司-专业网站定制、快速模板网站建设、高性价比梨树网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式梨树网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖梨树地区。费用合理售后完善，十多年实体公司更值得信赖。
一、引言
我们使用ngx-loading，需要在app.component.html上写模板，绑定一个布尔值loading.此时如果我们想在其他组件中使用这个loading控件，就需要在每个组件的html重新写模板，这就显得累赘了。在此，我们以ngx-loading为例，展示子组件如何通过service改变app组件中的布尔值loading。
// app.component.html
二、实现
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
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); // 关闭loading7.额外方法：在子组件注入AppComponent,简单粗暴，但不推荐……
constructor(public appComponent: AppComponent) {
}
this.appComponent.loading = true; // 启用loading
this.appComponent.loading = false; // 关闭loading以上是“Angular5.0 子组件如何通过service传递值给父组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！