Question

我正在尝试打开模态窗口，它在不同的组件中得到了模板和逻辑。我希望通过订阅一些可观察的方式实现这一点，但它无法正常工作。这是我的代码

我想要触发模态的组件方法

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
  ],

Answer 1

尝试创建变量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订阅不起作用

1 个答案: