Angular 2订阅无法正常工作

问题描述：

我试图打开模版窗口，它在不同的组件中获取了它的模板和逻辑。我想通过订阅一些可观察到的，但它不工作。这是我的代码Angular 2订阅无法正常工作

组件的方法从中我想火模态

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

服务中，我接下来请梅索德

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

组件中，我订阅

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

我也在appModule中提供了我的服务，我已经阅读了它应该只提供给我一个模块。

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

您可以添加组件的'@ Component'注解？ 'sharedService'和'modalService'是同样的服务权限吗？ – echonax

更新，是的，它是相同的服务 – Stefan

你有任何懒惰加载模块，组件？ – echonax

答

尝试创建变量public modalSubscription: Subscription;变量，并在构造函数分配的模式服务于它。并确保您有Subscription从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(); 
    }); 
}

Angular 2订阅无法正常工作

相关推荐