Angular 6/7延遲加載模塊，具有其他延遲加載模塊所需的服務

Question

我有一個角度應用程序，其中我有一個帶有幾個子模塊的核心模塊，如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 {}

在支出模塊中，我需要消耗我在providersModule中公開的可觀察值，如此處所示

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聲明了providers數組，但未能解決問題

Answer 1

您需要制作一個單獨的模塊，以導出ProvidersService ，然后將其導入InvoiceModule和ExpensesModule模塊。 您正在將“頁面模塊”與“實用程序”或“服務”模塊混淆。

我想您最終將使用ProviderServiceModule ， ProvidersPageModule ， InvoicePageModule和ExpensesPageModule

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

Answer 2

我在服務中使用以下內容解決了該問題

//providers$: Observable<Provider[]> = from([]);
  providers$: Subject<any[]> = new ReplaySubject<any[]>(1);