Angular 6：动作后刷新组件答案

【问题标题】：Angular 6: Refresh a component after an actionAngular 6：动作后刷新组件
【发布时间】：2019-07-17 14:23:59
【问题描述】：

我有两个组件，一个显示产品列表，另一个组件允许更新产品。他们都共享相同的产品服务，并且在产品更新后我无法刷新产品组件列表。我想出了一种使用主题的方法，但感觉很hacky。

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()
 }
}

product-submit.component.ts

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.service.ts

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

【问题讨论】：

请参考github.com/prabhatmishra33/ShoppingSiteMeanJSApp/blob/master/…我在这个项目中使用了observable来订阅change事件。

标签： angular

【解决方案1】：

这里有几个选项。

如果你想通过从服务器重新获取所有数据来刷新，你可以简单地调用你的 getProducts() 方法，看起来就像你现在正在做的那样。
您可以改为保留服务中的产品列表，当添加/删除产品时，从服务列表中添加/删除它们。然后，如果您在任何需要该列表的组件中绑定到该列表，它将使用 Angular 的数据绑定自动更新。我在下面提到的 stackblitz 中有一个演示。

我在 stackblitz 中有一个例子：https://stackblitz.com/edit/angular-no-subject-deborahk

它演示了使用 getter 的非常简单的选项。然后，它使用BehaviorSubject 再次提供相同的功能，因此您可以评估这两种技术并决定哪种技术最适合您的特定场景。

【讨论】：