Angular 角度6：在操作后刷新组件

我有两个组件，一个显示产品列表，另一个允许更新产品。他们都共享相同的产品服务，在产品更新后，我很难刷新产品组件列表。我已经想出了一种使用某个主题的方法，但它让人感觉不舒服

product-list.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { ProductService} from '@app/products/product.service';
import { Subscription } from 'rxjs';

@Component({
   selector: 'app-product-list' 
   templateUrl: './product-list.component.html'
   styleUrls: './product-list.component.css'
})

export class ProductListComponent implements OnInit {

 constructor(private productService: ProductService) { }

 ngOnInit(): void{
   this.products = [];
   this.productService.Approved$.subscribe(() => this.refreshComponent())
  }

 getProducts(): void {
   this.productservice.getProducts().subscribe(products => {this.products = products})
 }

 refreshComponent(): void {
  this.getProducts()
 }
}

import { Component, OnInit } from '@angular/core';
import { ProductService} from '@app/products/product.service';

@Component({
  selector: 'product-submit'
  templateUrl: './product-submit.component.html'
  styleUrls: ['./product-submit.component.css']
})

export class ProductSubmitComponent implements OnInit {
constructor(private productService: ProductService) { }

onSubmit(text:string) {
  this.productService.updateProduct(productIds, text).subscribe(
   () => {this.productService.submittedapprov.next();
  });
 }
}

product-submit.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { ProductService} from '@app/products/product.service';
import { Subscription } from 'rxjs';

@Component({
   selector: 'app-product-list' 
   templateUrl: './product-list.component.html'
   styleUrls: './product-list.component.css'
})

export class ProductListComponent implements OnInit {

 constructor(private productService: ProductService) { }

 ngOnInit(): void{
   this.products = [];
   this.productService.Approved$.subscribe(() => this.refreshComponent())
  }

 getProducts(): void {
   this.productservice.getProducts().subscribe(products => {this.products = products})
 }

 refreshComponent(): void {
  this.getProducts()
 }
}

import { Component, OnInit } from '@angular/core';
import { ProductService} from '@app/products/product.service';

@Component({
  selector: 'product-submit'
  templateUrl: './product-submit.component.html'
  styleUrls: ['./product-submit.component.css']
})

export class ProductSubmitComponent implements OnInit {
constructor(private productService: ProductService) { }

onSubmit(text:string) {
  this.productService.updateProduct(productIds, text).subscribe(
   () => {this.productService.submittedapprov.next();
  });
 }
}

产品服务

import {Injectable, Output} from '@angular/core'
import {HttpClient, HttpHeaders, HttpErrorResponse} from '@angular/common/http'
import {Observable, throwError, Subject} from 'rxjs'

@Injectable({
providedIn: 'root'
})

export class ProductService {
  submittedapprov = new Subject();
  submittedApproval$ = this.submittedapprov.asObservable();

 constructor(private http: HttpClient){
 ...
 }

 updateProduct(productIds: number[], text: string): Observable<any> {
  return this.http.post(this.apiurl)
 }

 getProducts(): Observable<any> {
  return this.http.get(this.apiurl)
 }
}

从'@angular/core'导入{Injectable，Output}
从“@angular/common/http”导入{HttpClient，HttpHeaders，HttpErrorResponse}
从“rxjs”导入{可观察，投掷者，主体}
@注射的({
providedIn:'根'
})
出口类产品服务{
submittedapprov=新主题（）；
submittedaproval$=this.submittedaprov.asObservable（）；
构造函数（专用http:HttpClient）{
...
}
updateProduct（productId:number[]，text:string）：可观察{
返回this.http.post（this.apirl）
}
getProducts（）：可观察{
返回this.http.get（this.apirl）
}
}

这里有几个选项

• 如果要通过重新设置服务器上的所有数据来刷新，只需调用

  getProducts（）

  方法，就像现在这样

• 您可以保留服务中的产品列表，在添加/删除产品时，从服务列表中添加/删除产品。然后，如果您绑定到任何需要该列表的组件中的该列表，则将使用Angular的数据绑定自动更新该列表。我在下面提到的stackblitz中有一个演示

我这里有一个stackblitz的例子：

它演示了使用getter的非常简单的选项。然后，它使用

行为子对象再次提供相同的功能，因此您可以评估这两种技术，并决定哪种技术最适合您的特定场景。
请参阅我在本项目中使用的observable订阅更改事件。