Angular 4 Subject подписка Поделиться между 2 модулями - PullRequest
Новая
       4

Angular 4 Subject подписка Поделиться между 2 модулями

0 голосов
/ 24 мая 2018

Моя текущая настройка:

Shared-module.ts: 

 import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import {LayoutService} from './services/layout.service';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent
  ],
  declarations: [HeaderComponent]
})
export class SharedModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [LayoutService]
    };
  }
}

layout.service.ts: 

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


@Injectable()
export class LayoutService {

  constructor() { }


  VisibleSubject$ = new Subject<boolean>();


  EnableButton (): void {
    this.VisibleSubject$.next(true);
    console.log('Visible Subject returns:', true);
  }

authorization.service.ts: 

import { Injectable } from '@angular/core';
import {LayoutService} from '../shared-module/services/layout.service';
import {VoidService} from '../shop/void.service';



@Injectable()
export class AuthorizationService {

  constructor(private layoutservice: LayoutService,
              private voidserv: VoidService) {}
  // just for test
  private credentials = {
    login: 'admin',
    password:  'admin'
  };

  private isLogged = false;

  login(login, password) {
    return new Promise((resolve, reject) => {
      if (this.credentials.login === login && this.credentials.password === password) {
        this.isLogged = true;
        this.layoutservice.EnableButton();

        resolve();
      } else {
        reject();
      }
    });
  }

shop.module.ts: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ProductsComponent} from './products/products.component';
import { ...}


@NgModule({
  imports: [
    RouterModule,
    CommonModule,
    LoginModule,
    ShopRoutingModule,
    ReactiveFormsModule,

    SharedModule

  ],
  exports: [ProductsComponent],
  providers: [ShopResolve, FootserviceService],
  declarations: [ProductsComponent... ShopComponent]
})
export class ShopModule { }

products.component.ts: 

import {...}




@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.less']
})
export class ProductsComponent implements OnInit, AfterViewInit {

  visible: boolean = false;


                         // 3 Services in Constructor
  constructor(private shopservice: ShopService,
              private routerService: Router,
              private lay: LayoutService,
             ) { }

  ngOnInit() {
    this.lay.VisibleSubject$.subscribe((value) => {
      this.visible = value;
      console.log('Visible: ', this.visible); });
    ...
  }

В чем проблема?Когда после этого я не могу подписать свое значение из Subject на products.component: 

this.lay.VisibleSubject$.subscribe((value) => {
          this.visible = value;
          console.log('Visible: ', this.visible); });
        ...
      }

Консоль пуста, а значение по-прежнему не определено, я пробовал множество решений, но у меня все работало.Движок входа в систему работает отлично, он возвращает меня на консоль: 

Subject {_isScalar: false, observers: [], closed: false, isStopped: false, hasError: false, …}

Но тогда, если я хочу подписаться на эту тему, видимость возвращает false каждый раз, когда я вхожу и выхожу, каждый раз: (*

Я новичок, но понимание услуг поднимает меня. Может кто-нибудь сказать, что я делаю не так? Что-то не так с моим общим модулем? Пожалуйста, ответьте мне

1 Ответ

0 голосов
/ 24 мая 2018

Работает сейчас, но только с BehaviorSubject (null) и со сторожем CanLoad в Lazy Loading ShopModule.Может кто-нибудь объяснить мне причину?

Модуль маршрутизации приложений: 

import {Class, NgModule} from '@angular/core';
import {PreloadAllModules, Route, RouterModule, Routes} from '@angular/router';
import {CanloadGuard} from './authorization/canload.guard';
import {MainAboutComponent} from './about/main-about/main-about.component';
import {PageNotFoundComponent} from './shared-module/page-not-found/page-not-found.component';
import {InfoContactComponent} from './contact/info-contact.component';




const APP_ROUTES : Routes = [
      {path: '', pathMatch: 'full', redirectTo: 'shop'},
              //The Most important!! Delete ShopModule from app.module!!!
  {path: 'shop', canLoad: [CanloadGuard], loadChildren: 'app/shop/shop.module#ShopModule'},
  {path: 'about' , component: <any>MainAboutComponent},
  {path: 'contact', component: <any>InfoContactComponent},
  {path: '**', component: PageNotFoundComponent}

];

LayoutService: 

VisibleSubject$ = new BehaviorSubject<boolean>(null);
...