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