Angular5.0 子組件通過service傳遞值給父組件的方法

npm install --save ngx-loading

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 { }

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);
 }
}

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();
 }

}

constructor( private utils: UtilsService) {

 }
this.utils.emitBoolean(true); // 啟用loading
this.utils.emitBoolean(false); // 關閉loading

 constructor(public appComponent: AppComponent) {
 
 }
this.appComponent.loading = true; // 啟用loading
this.appComponent.loading = false; // 關閉loading