在不同的模块和组件之间共享数据

时间:2018-07-30 12:43:26

标签: javascript angular typescript rxjs

我有两个具有以下组件的独立模块。

  1. 导航栏模块
    • 导航栏组件
  2. 共享身份验证弹出模块
    • 登录组件

我唯一要做的就是在Navbar组件或任何其他模块的任何其他组件中单击按钮时使用服务显示登录弹出窗口。

这是我的Auth Popup共享模块:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthPopupTriggerService } from './popup-trigger.service';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import {
  MatFormFieldModule,
  MatProgressSpinnerModule,
  MatInputModule,
  MatIconModule,
  MatProgressBarModule
} from '@angular/material';
import { ReactiveFormsModule } from '@angular/forms';
import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

@NgModule({
  imports: [
    CommonModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    ReactiveFormsModule,
    MatIconModule,
    MatProgressBarModule,
    SweetAlert2Module
  ],
  declarations: [LoginComponent, SignupComponent],
  providers: [],
  exports: [LoginComponent]
})
export class AuthPopupModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AuthPopupModule,
      providers: [AuthPopupTriggerService]
    };
  }

}

这是我的popup-trigger.service.ts,用于在组件之间共享数据。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthPopupTriggerService {
  private messageSource = new BehaviorSubject('');
  currentMessage = this.messageSource.asObservable();
  constructor() {}
  openPopup(message: string) {

    this.messageSource.next(message);
  }

这是我的login.component.ts

的内容
ngOnInit() {
    this.triggerService.currentMessage.subscribe(
      msg => {
        console.log('try');
        if (msg === 'login') {
        }
      },
      err => console.log(err)
    );
  }

行为主题未订阅login.component.ts文件,并且console.log()未运行。我还将共享模块导入了app.module.ts“ AuthPopupModule.forRoot()”

我在哪里缺少什么?

0 个答案:

没有答案