Angular 2 abonnieren funktioniert nicht

Question

Ich versuche, modales Fenster zu öffnen, die es Vorlage und Logik in verschiedenen Komponenten hat. Ich möchte dies erreichen, indem ich einige beobachtbare Objekte abonniere, aber es funktioniert nicht. Es ist mein Code

Component Methode, aus dem ich

import { Component, OnInit, EventEmitter } from '@angular/core'; 
import { MaterializeAction } from 'angular2-materialize'; 
import { Credentials } from "../shared/models/credentials.interface"; 
import { UserService } from "../shared/services/user.service"; 
import { Router, ActivatedRoute } from "@angular/router"; 
import { LoginComponent } from "../login/login.component"; 
import { ModalService } from "../shared/services/modal.service"; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'] 
}) 
export class HeaderComponent implements OnInit { 
    modalActions = new EventEmitter<string | MaterializeAction>(); 

    errors: string; 
    isRequesting: boolean; 
    submitted: boolean = false; 
    loged: boolean = !!localStorage.getItem('auth_token');; 
    credentials: Credentials = { email: '', password: '' }; 

    constructor(private userService: UserService, 
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private sharedService: ModalService) { } 

    ngOnInit() { 
    } 

    openModal() { 
    this.sharedService.showModalMethod(); 
    } 

Service-modal abzufeuern wollen, in dem ich

import { BrowserModule } from '@angular/platform-browser' 
import { Injectable } from "@angular/core"; 
import { ReplaySubject } from "rxjs/ReplaySubject"; 
import { Observable } from "rxjs/Observable"; 

@Injectable() 
export class ModalService { 
    showModal$: Observable<any>; 
    private showModal = new ReplaySubject<any>() 

    constructor() { 
     this.showModal$ = this.showModal.asObservable(); 
    } 


    showModalMethod() { 
     //It is comming here 
     this.showModal.next(''); 
    } 
}; 

Component nächsten Methode nennen, in dem ich zu

abonnieren

import { Subscription } from 'rxjs'; 
import { Component, OnInit, OnDestroy, EventEmitter } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Credentials } from "../shared/models/credentials.interface"; 
import { UserService } from "../shared/services/user.service"; 
import { MaterializeAction } from "angular2-materialize/dist"; 
import { ModalService } from "../shared/services/modal.service"; 




@Component({ 
    selector: 'app-login-form', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'] 
}) 
export class LoginComponent implements OnInit, OnDestroy { 

    private subscription: Subscription; 
    private modalSubscription: Subscription; 
    modalActions = new EventEmitter<string | MaterializeAction>(); 

    brandNew: boolean; 
    errors: string; 
    isRequesting: boolean; 
    submitted: boolean = false; 
    credentials: Credentials = { email: '', password: '' }; 

    constructor(private userService: UserService, 
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private modalService: ModalService) { 
    modalService.showModal$.subscribe((x) => { 
     this.openModal(); 
    }); 
    } 

Ich habe auch meinen Dienst in appModule zur Verfügung gestellt, ich habe gelesen, dass es nur in einem Modul zur Verfügung gestellt werden sollte .

providers: [ 
    AuthGuard, 
    UserService, 
    ConfigService, 
    DashboardService, 
    ModalService 
    ], 

Answer 1

Try variable public modalSubscription: Subscription; Variable zu erstellen und Ihre modal Service, um es in Ihrem Konstruktor zuweisen. Und stellen Sie sicher, dass Sie umfassen Subscription von rxjs

import { Subscription } from 'rxjs/Subscription'; 

public modalSubscription: Subscription; <---- 

constructor(private userService: UserService, 
private router: Router, 
private activatedRoute: ActivatedRoute, 
private modalService: ModalService) { 

    this.modalSubscription = modalService.showModal$.subscribe((x) => { 
    //It is not comming here 
    this.openModal(); 
    }); 
}