指令サブスクリプションは、次の

Question

Plunkrを呼び出す対象にもかかわらず、発生しません：https://plnkr.co/edit/KfPfVSbZm087uIPvFEkM?p=preview

私はモーダル・コンポーネントのAPI機能を提供するサービスを持っている、と私は追加するために使用することができますディレクティブを得ましたモーダルが開いているときに、任意の要素へのクラス。しかし、私が何をしていても、指令内のサブスクリプションは起動しません。

私はSubjectとBehaviorSubjectの両方を使用しようとしましたが、何も機能しません。

サービス：

@Injectable() 

export class ModalApiService { 

    constructor() {} 

    private states = new Subject<any>(); 

    states$ = this.states.asObservable(); 

    open(id: string, template?: string): void { 
    this.states.next({isOpen: true, id: id, template: template}); 

    // This runs as expected 
    console.log(true); 
    } 

    close(id: string): void { 
    this.states.next({isOpen: false, id: id}); 
    } 
} 

指令：

@Directive({ 
    selector: '[modalState]' 
}) 

export class ModalStateDirective implements OnDestroy, OnInit { 

    constructor(private modalApi: ModalApiService) {} 

    private modalSubscription: Subscription; 

    @HostBinding('class.modal-open') 
    isOpen: boolean; 

    ngOnInit() { 

    this.modalSubscription = this.modalApi.states$.subscribe(
     state => { 
     this.isOpen = state.isOpen; 

     console.log(this.isOpen) 
     } 
    ); 
    } 

    ngOnDestroy() { 
    this.modalSubscription.unsubscribe(); 
    } 
} 

Answer 1

あなたはBehaviourSubjectを使用している場合は、それが動作し、それがsubscribe functionをヒットします。しかし、私はなぜオブジェクトを正しくログオンすることができるのかわからないのですが、なぜ私たちが持っているのかわかりません。undefined valueobject properties作業するが、動作していない

import 'rxjs/Rx'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

private states = new BehaviorSubject<any>(); 
states$ = this.states.asObservable(); 

：ディレクティブngOnInitは、アプリのngOnInitた後に発生しているためhttps://plnkr.co/edit/YspSd2fKvktPEk6bL2hF?p=preview

Answer 2

サブスクリプションは、発生しません。したがってnextは、のサブスクリプションの前にと呼ばれます。あなたは本当に、私はあなたがを使用することをお勧めし、サービスを使用して開いたダイアログで開始したい場合はhttps://plnkr.co/edit/MJET0Jw12SLx0BChAiWz?p=preview

：

toggle() { 
    this.modalApi.open('someid'); 
    this.modalApi.close('someid'); 
} 

デモ：これは、サービスのオープン/クローズのメソッドを呼び出す単純なボタンで証明することができますReplaySubject。これは、最初のサブスクリプションの前にあなたのすべてが発光を与える必要があります。ここでは

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/replaysubject.md

がReplaySubjectを使用してデモです：

https://plnkr.co/edit/boHGQhc7atMTOTPLMnO0?p=preview