2017-04-06 1 views
0

내 응용 프로그램에서 단일 상태 (로더의 가시성)를 관리하는 간단한 서비스를 만들려고합니다.간단한 상태 서비스 원치 않는 복잡성

변경 사항은 일부 구성 요소에 의해 방출되며 주 레이아웃 구성 요소는이를 변경하여 부울 변경을 감시합니다. 그런 다음 간단한 ngIf으로 처리됩니다.

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

@Injectable() 
export class AppLoaderService { 
    private isLoaderVisible = new Subject<boolean>(); 

    changeLoaderState = this.isLoaderVisible.asObservable(); 

    emitChange(state: any) { 
    this.isLoaderVisible.next(state); 
    } 

} 

간단한 toggler 너무 많은 복잡성을 소개하는이 간단한 서비스를 만들기위한 나의 방법은 다음과 같습니다 여기

코드인가?

내 경우에는 Subject 또는 BehaviorSubject과 관련이 있습니까? 우리는 그러한 변경 사항을 내보내거나 서비스 초기화 (BehaviorSubject)에서 기본값을 설정하고자 할 때 필요성에 대한 정보를 발견했습니다.

하지만 여기서는 단순한 Observable으로 충분할 수도 있지만 값 변경을 처리하는 방법은 무엇일까요?

답변

1

게재중인 것은 단 *ngIf 인 경우 SubjectObservable은 사용하지 않습니다. 단순한 boolean 값을 서비스의 등록 정보로 사용할 수 있습니다. 어쩌면 getter와 setter 일 수도 있지만, 가시성의 변화에 ​​반응해야하는 의존성이 없다면 Observables와 복잡해 보이지는 않을 것입니다.

+0

내 레이아웃 구성 요소가이 부울을 사용하여,이 간단한 변경 감지 할 수있을 것이다 component.ts

export class AppComponent { constructor( private loaderService: AppLoaderService ){} ... 

에 그리고 당신의 component.html에 가정 해 봅시다 부울? 변경 탐지를 트리거하기 위해 어떤 값 (예 : 관찰 가능)에 등록 할 필요가 없습니까? – BlackHoleGalaxy

+0

예, 변수를 변경하면 소위'zone'에서 일할 가능성이 큽니다. 이것은 각도의 아름다움입니다. 변수 만 변경할 수 있으며 템플릿은 즉시 반응합니다. 물론 이것은 디폴트'ChangeDetectionStrategy'를 사용하는 경우입니다. – PierreDuc

1

원하는 모든 것이 로더를 표시하는 것이면 훨씬 더 간단합니다.

public isLoaderVisible:boolean=false; 

의이

<div *ngIf="loaderService.isLoaderVisible"> 
    <!-- do something here -->