您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Angular5.0 子組件如何通過service傳遞值給父組件”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“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>
二、實(shí)現(xiàn)
1.安裝ngx-loading 詳情點(diǎn)擊
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(); // 發(fā)射數(shù)據(jù),當(dāng)調(diào)用這個方法的時候,Subject就會發(fā)射這個數(shù)據(jù),所有訂閱了這個Subject的Subscription都會接受到結(jié)果 // loading true為啟用loading,false為關(guān)閉loading emitBoolean(loading: boolean) { this.loadingSource.next(loading); } }
5.在app.component.ts使用subscribe來訂閱,當(dāng)數(shù)據(jù)被發(fā)射出來的時候,這里就會接收到結(jié)果
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來訂閱,當(dāng)數(shù)據(jù)被發(fā)射出來的時候,這里就會接收到結(jié)果 this.subscription = this.utils.loadingObservable.subscribe(loading => this.loading = Boolean(loading)); } ngOnInit() { } /* 銷毀的時候需要取消訂閱,因?yàn)橛嗛喼髸恢碧幱谟^察者狀態(tài),不取消會導(dǎo)致泄露*/ ngOnDestroy() { this.subscription.unsubscribe(); } }
6.在其他子組件需要啟用或關(guān)閉loading時,只需要一行代碼。
constructor( private utils: UtilsService) { } this.utils.emitBoolean(true); // 啟用loading this.utils.emitBoolean(false); // 關(guān)閉loading
7.額外方法:在子組件注入AppComponent,簡單粗暴,但不推薦……
constructor(public appComponent: AppComponent) { } this.appComponent.loading = true; // 啟用loading this.appComponent.loading = false; // 關(guān)閉loading
以上是“Angular5.0 子組件如何通過service傳遞值給父組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。