单击事件后未显示 Angular 个组件之间的共享数据

Question

我希望在我的 angular 应用程序中，在组件 1 中发生点击事件后，组件 1 和组件 2 之间共享一组产品 productCategory（这两个组件没有任何关系） .我试图通过这种方式创建服务来实现这个目标：

import { Injectable } from '@angular/core'; 
import { Product } from '../product';

@Injectable({   providedIn: 'root' }) 
export class SharedService {   
  productsCategory: Product[]=[];

  constructor() { }

  setProductCategory(data: Product[]){
    this.productsCategory=data;   }

  getProductCategory(){
    return this.productsCategory;   } }

但是当点击事件发生时，浏览器页面上什么也没有显示，数组只是在浏览器控制台打印出来。

这是component1html代码中的点击事件：

<mat-menu #makeup="matMenu">
    <button mat-menu-item (click)="categoryFilter('Make-up eyes')" routerLink="/products/searchProduct/by_category"  routerLinkActive="active">Eyes</button>
    ...
</mat-menu>

component1.component.ts

 export class Component1 implements OnInit {
      public productCategory: Product[]=[];
      displayedColumns = ['name', 'description', 'price']
      constructor(private  shared: SharedService,private productService: ProductService){}
    
      ngOnInit():void {
    
      }
    
      public categoryFilter(category: string): void{
        this.productService.getProductsByCategory(category).subscribe(
          (response: Product[]) => {
            this.productCategory=response;
            this.shared.setProductCategory(this.productCategory);
            console.log(response);
    
          },
          (error: HttpErrorResponse)=>{
            alert(error.message);
          }
        )
      }
    }

component2.component.ts:

    export class Component2 implements OnInit {
      public productCategory: Product[]=[];
      displayedColumns = ['name', 'description', 'price']
      constructor(private shared: SharedService
      ) { }
    
      ngOnInit(): void {
        this.productCategory=this.shared.getProductCategory();
    
      }
    }

component2.component.html:

<table mat-table [dataSource]="productCategory" class="mat-elevation-z8" >


  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.position}} </td>
  </ng-container>


  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.name}} </td>
  </ng-container>


  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Description </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.description}} </td>
  </ng-container>


  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.price}} </td>
  </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 1

使用 observables 而不是 getters：

 export class SharedService {   
  private productsCategory: new BehaviorSubject<Array<Product>>([]);

  public productsCategory$:Observable<Array<Product>> = this.productsCategory.asObservable()

  constructor() { }

  setProductCategory(data: Product[]){
    this.productsCategory.next(data);   }

订阅组件中的 public 可观察对象

单击事件后未显示 Angular 个组件之间的共享数据

Shared data between Angular componets not displayed after click event

html

routes

typescript

angular-components

angular