Angular 8-行为主体未在服务中发出下一个值

Question

您好，我有一个角度应用程序，我在其中将数据从一个组件传递到服务，并尝试通过调用下一个函数来更新该服务中行为主体的值，以便依次更新另一个组件中的订阅值。我的问题是，当传递数据并创建一个对象传递给行为主体时，下一个函数将不执行。这是代码。

我的ShopService.ts

为了节省空间，我在代码中省略了其他函数，但它们与我尝试实现的代码无关

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { AuthService } from 'src/app/auth/auth.service';
import { Product } from '../models/product.model';

import { BehaviorSubject } from 'rxjs';
import { take, exhaustMap, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ShopService {

  productsSubject = new BehaviorSubject<Product[]>(null);

  productSubject = new BehaviorSubject<Product>(null);

  productObs = this.productSubject.asObservable();

  private products: Product[];

  private product: Product;

  private userToken;

  constructor(private http: HttpClient, private authService: AuthService) {

  }

 // trying to update the behavior subject here but next never executes but data is logged to console
 editProductForm(id: string, title: string, price: number, imagePath: string, description: string) {
     this.product = new Product(title, price, imagePath, description, id);
     console.log('edit product ' + this.product.title);
     this.productSubject.next(this.product);
  }
}

admin-shop.component.ts

这是我试图在更新行为主题值后在其中进行订阅的地方

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';

import { ShopService } from '../services/shop.service';

import { Subscription } from 'rxjs';

import { Product } from '../models/product.model';

@Component({
  selector: 'app-admin-shop',
  templateUrl: './admin-shop.component.html',
  styleUrls: ['./admin-shop.component.css']
})
export class AdminShopComponent implements OnInit {

  @Output() editProductEvent = new EventEmitter<boolean>();

  productSub: Subscription;

  product: Product;

  error: string;

  isLoading = false;

  isEditing = false;

  constructor(private shopService: ShopService) { }

  ngOnInit() {
    this.productSub = this.shopService.productSubject.subscribe(product => {
      if (product) {
        console.log('editing product' + product);
        this.editProductEvent.emit(true);
        this.product = new Product(
          product.title,
          product.price,
          product.imagePath,
          product.description,
          product._id);
      }
    });
  }
}

item-list.component.ts

这是我正在将数据发送到服务的位置，我知道它是在到达服务时记录在控制台中的，因此正在发送。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Product } from '../models/product.model';
import { ShopService } from '../services/shop.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit, OnDestroy {

  products: Product[] = [];

  private shopSub: Subscription;

  private subjectSub: Subscription;

  constructor(private shopService: ShopService) { }

  editProduct(id: string, title: string, price: number, imagePath: string, description: string) {
    this.shopService.editProductForm(id, title, price, imagePath, description);
  }
}

我提供的代码是问题所在，因为我已经在应用程序的其他部分中行为主题按预期工作，只是当我将数据从项目列表组件发送到服务时，它才记录数据但不会更新行为主题，它也永远不会到达订阅，因为随后没有数据记录在admin-shop组件订阅代码中。

希望我已经提供了足够的资源来找到答案，但如果没有，请索取更多您认为必要的信息。在此先感谢：）

这里是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';
import { DropDownDirective } from './util/dropdown.directive';
import { HttpClientModule } from '@angular/common/http';
import { LoadingSpinner } from './util/loading-spinner/loading-spinner.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { AdminShopComponent } from './admin/dashboard/admin-shop/admin-shop.component';
import { AdminProfileComponent } from './admin/dashboard/admin-profile/admin-profile.component';
import { ItemListComponent } from './admin/dashboard/item-list/item-list.component';
import { BlockchainComponent } from './blockchain/blockchain.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    AuthComponent,
    DropDownDirective,
    LoadingSpinner,
    AdminComponent,
    DashboardComponent,
    AdminShopComponent,
    AdminProfileComponent,
    ItemListComponent,
    BlockchainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

似乎未实例化您的服务。尝试将服务导入到Providers下的app.module中

Import { ShopService } from '../services/shop.service';// Or wherever it's at
...
  providers: [ShopService],

Answer 2

您正在将事件发射器实例化为将其设置为true的相同组件内。因此它让自己知道它已被编辑，但没有其他人。由于您使用的是服务，因此可以在变量发生更改时在那里更新变量，并在组件中订阅该更改。祝你好运！