如何实现事件发射器而不是刷新页面？

如何解决如何实现事件发射器而不是刷新页面？

在我的网站项目中有一个组件称为authorize-Product。就像标题中所说的那样，它是必须在产品中显示在商店组件之前对其进行授权的组件。我已经使用“接受”或“拒绝”按钮实现了包含这些项目的列表。一切正常，但是每次按下这两个按钮之一后，我必须刷新页面，因此不再显示该项目。我听说EventEmitters是比每次刷新页面更好的方法，但是我不知道如何实现它。有人可以帮忙吗？

这是我的authorize.ts文件：

--declaration

这是显示列表的我的authorize.html文件：

import { Component,OnInit } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {environment} from "../../environments/environment";
import { Product } from '../models/product.model';

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

  isAdmin: boolean;

  products: Product[];

  displayedColumns: string[] = ['title','location','delivarable','description','price','acceptorreject'];


  constructor(private httpClient: HttpClient) { }


  ngOnInit(): void {

    this.getProducts()
  }

  getProducts(){
    return this.httpClient.get(environment.endpointURL + 'products/authorized/no').subscribe((res: any) =>
    {
      console.log(res);
      this.products = res;
    })
  }

  authorizeProduct(product: Product){
    product.authorized = "yes"
    product.status = "available"


    return this.httpClient.put(environment.endpointURL + 'products/' + product.productId,product ).subscribe((res: any) =>
    {
      console.log("Update:");
      console.log(res);

      //refresh page to update table
      this.refresh()
    })

  }

  rejectProduct(productId: number){
    return this.httpClient.delete(environment.endpointURL + 'products/' + productId).subscribe((res: any) =>
    {
      console.log("Delete:");

      //refresh page to update table
      this.refresh()
    })
  }

  refresh(): void {
    window.location.reload();
  }

}

解决方法

您将要使用@output装饰器。这是相关的docs。

基本上，您将创建一个看起来像这样的属性：

// remember to import Output and EventEmitter from @angular/core

@Output() authorize = new EventEmitter();

// To emit the event update your authorizeProduct method
authorizeProduct(product: Product){
  product.authorized = "yes"
  product.status = "available"

  return this.httpClient.put(environment.endpointURL + 'products/' + product.productId,product ).subscribe((res: any) => {
    console.log("Update:");
    console.log(res);

    //refresh page to update table
    this.authorize.emit()
  })
}

然后在您的父组件中，您可以观看这样的事件

<app-product-authorization (authorize)="someFunctionInYourComponent()"></app-product-authorization>