Question

我有两个组件，一个组件显示产品列表，另一个组件允许更新产品。它们都共享相同的产品服务，并且在更新产品后刷新产品列表的组件列表时遇到麻烦。我想出了一种使用Subject的方法，但感觉很hack。

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

Answer 1

您在这里有几种选择。

如果您想通过从服务器中获取所有数据来刷新，则可以简单地调用import React, { Component } from 'react'; //import react in our code. import { StyleSheet, View,TextInput, TouchableOpacity, Text,} from 'react-native'; // import all basic components import Share from 'react-native-share' import QRCode from 'react-native-qrcode-svg'; //import QRCode class Inventory extends Component { svg; constructor() { super(); this.state = { inputValue: '', inputValue2: '', // Default Value of the TextInput valueForQRCode: '', // Default value for the QR Code }; } getTextInputValue = () => { // Function to get the value from input // and Setting the value to the QRCode this.setState({ valueForQRCode: this.state.inputValue + this.state.inputValue2 }); }; shareQR =() =>{ this.svg.toDataURL((data) => { const shareImageBase64 = { title: "QR", message: "Ehi, this is my QR code", type: 'image/png', url: `data:image/png;base64,${data}` }; Share.open(shareImageBase64); }); } render() { return ( <View style={styles.MainContainer}> {/* <QRCode value={"Abhigyan" + this.state.valueForQRCode} size={250} bgColor="#000" fgColor="#fff" getRef={(ref) => (this.svg = ref)} onPress={() =>{shareQR()}} /> */} <TouchableOpacity onPress={this.shareQR}> <QRCode value={"," + this.state.valueForQRCode} size={250} fgcolor="#fff" bgColor="#000" getRef={(ref) => (this.svg = ref)} /> </TouchableOpacity> <TextInput // Input to get the value to set on QRCode style={styles.TextInputStyle} onChangeText={text => this.setState({ inputValue: text })} underlineColorAndroid="transparent" placeholder="Enter text to Generate QR Code" /> <TextInput // Input to get the value to set on QRCode style={styles.TextInputStyle} onChangeText={text => this.setState({ inputValue2: text })} underlineColorAndroid="transparent" placeholder="Enter text to Generate QR Code" /> <TouchableOpacity onPress={this.getTextInputValue} activeOpacity={0.7} style={styles.button}> <Text style={styles.TextStyle}> Generate QR Code </Text> </TouchableOpacity> </View> ); } } export default Inventory; const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 10, alignItems: 'center', paddingTop: 40, }, TextInputStyle: { width: '100%', height: 40, marginTop: 20, borderWidth: 1, textAlign: 'center', }, button: { width: '100%', paddingTop: 8, marginTop: 10, paddingBottom: 8, backgroundColor: '#F44336', marginBottom: 20, }, TextStyle: { color: '#fff', textAlign: 'center', fontSize: 18, }, });方法，就像您现在正在做的那样。
您可以改为保留服务中的产品列表，添加/删除产品时，请从服务中的列表中添加/删除产品。然后，如果您在需要该列表的任何组件中绑定到该列表，它将使用Angular的数据绑定自动更新。我在下面提到的stackblitz中有一个演示。

我在这里有个例子，https://stackblitz.com/edit/angular-no-subject-deborahk

它演示了使用吸气剂的非常简单的选项。然后，它使用getProducts()再次提供相同的功能，因此您可以评估这两种技术，并确定哪种技术最适合您的特定情况。

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

1 个答案: