Угловые лениво загруженные модули 6/7 с услугами, необходимыми для других лениво загруженных модулей - PullRequest
Новая
       6

Угловые лениво загруженные модули 6/7 с услугами, необходимыми для других лениво загруженных модулей

0 голосов
/ 27 ноября 2018

У меня есть угловое приложение, в котором у меня есть основной модуль с несколькими дочерними модулями, как показано в core-routing.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CoreComponent } from './components/core/core.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'app',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'invoice', pathMatch: 'full' },
      { path: 'providers', loadChildren: '../providers/providers.module#ProvidersModule' },
      { path: 'invoice', loadChildren: '../invoice/invoice.module#InvoiceModule' },
      { path: 'expenses', loadChildren: '../expenses/expenses.module#ExpensesModule' }

    ],
    canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CoreRoutingModule {}

В модуле затрат мне нужно использовать наблюдаемое, которое я выставляю вМодуль провайдеров, как показано здесь 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ExpenseService } from '../expense.service';
import { ProvidersService } from 'src/app/providers/providers.service';
import { SelectItem } from 'primeng/api';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-expenses',
  templateUrl: './expenses.component.html',
  styleUrls: ['./expenses.component.css'],
})
export class ExpensesComponent implements OnInit, OnDestroy {
  serviceProviders: SelectItem[] = [];

  cols: any[];

  yearFilter: number;

  sliderTimeout: any;

  selectedRow;

  private subscription: Subscription;

  constructor(public expenseService: ExpenseService, private providerService: ProvidersService) {}

  ngOnInit() {
    this.cols = [
      { field: 'humanDate', header: 'Creation Date' },
      { field: 'serviceProviderName', header: 'Provider' },
      { field: 'invoiceId', header: 'Invoice ID' },
      { field: 'paymentOption', header: 'Payment Type' },
      { field: 'paymentTransactionId', header: 'Payment ID' },
      { field: 'amount', header: 'Amount' },
      { field: 'description', header: 'Description' },
    ];
    //setTimeout(() => this.getProviders(), 1000);
    this.getProviders();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  onRowSelect(expense) {
    this.expenseService.showDetailEvent.emit(expense);
  }

  onSliderChange(event, dt) {
    if (this.sliderTimeout) {
      clearTimeout(this.sliderTimeout);
    }

    this.sliderTimeout = setTimeout(() => {
      dt.filter(event.value, 'amount', 'gt');
    }, 250);
  }

  getProviders() {
    this.subscription = this.providerService.providers$.subscribe(providers => {
      this.serviceProviders = [];
      this.serviceProviders.push({ label: 'Provider', value: null });
      providers.map(provider => {
        this.serviceProviders.push({ label: provider.companyName, value: provider.id });
      });
    });
  }

  getName(event) {
    const label = this.serviceProviders.filter(x => x.value === event.serviceProviderName);
    if (label && label[0]) {
      return label[0].label;
    } else {
      return event.serviceProviderName;
    }
  }
}

, когда я впервые перехожу к модулю расходов, я вижу, что информации от службы провайдеров нет, но когда я перехожу к другому модулю (не обязательно модулю провайдеров), а затемвернитесь к модулю расходов, я могу увидеть информацию.

Я полагаю, у меня проблема с внедрением зависимости, но я не уверен, где

ps - я попытался объявить массив провайдеров с помощью ProvidersService вмодуль расходов, но он не решил проблему

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Я решил проблему с помощью следующего в моем сервисе 

//providers$: Observable<Provider[]> = from([]);
  providers$: Subject<any[]> = new ReplaySubject<any[]>(1);
0 голосов
/ 27 ноября 2018

Вам нужно создать отдельный модуль, который будет экспортировать ваш ProvidersService, а затем импортировать его в оба модуля InvoiceModule и ExpensesModule.Вы путаете «модуль страницы» с «служебным» или «служебным» модулем.

Я полагаю, что в конечном итоге вы получите ProviderServiceModule, ProvidersPageModule, InvoicePageModule и ExpensesPageModule

            +----------------------+
            |ProvidersServiceModule|
            +-----------+----------+
                        ^
       +----------------+----------------+
       |                                 |
+------+-----------+          +----------+--------+
|ExpensesPageModule|          |ProvidersPageModule|
+------------------+          +-------------------+
...