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;
    }
  }
}

当我第一次导航到费用模块时，我看到来自提供商服务的信息不存在，但是当我导航至另一个模块（不一定是提供商模块）然后返回到费用模块时，我可以看到该信息

我想我的依赖项注入有问题，但是我不确定在哪里

p.s。-我尝试在支出模块中使用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);

Angular 6/7延迟加载模块，具有其他延迟加载模块所需的服务

2 个答案: