Angular5.0 子組件如何通過service傳遞值給父組件

這篇文章主要為大家展示了“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

以上是“Angular5.0 子組件如何通過service傳遞值給父組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！