单个页面上的 Angular 多组件通信

Question

我在一页中并排放置了两张材料卡：

error.component.html

<mat-card-content><app-errortitle></app-errortitle></mat-card-content>
<mat-card-content><app-errorcount></app-errorcount></mat-card-content>

我正在尝试学习如何让 errorcount 识别用户何时从 errortitle 中选择一个项目来刷新 errorcount——没有我奇妙的“刷新按钮”解决方案。

errortitle.component.hmtl

<div *ngFor="let errorlist of errorList">
  <mat-card style="cursor:pointer;" (click)="toggleErrorCount(errorlist.id)">
    <mat-card-title>{{errorlist.title}}</mat-card-title>
    <mat-card-content>{{errorlist.description}}</mat-card-content>
  </mat-card><br />
</div>

errortitlecomponent.ts

import { Component, OnInit } from '@angular/core';
import { ErrorcountComponent } from '../errorcount/errorcount.component'

export interface ErrorList {
  id: number,
  title: string,
  description: string
};

@Component({
  providers: [ErrorcountComponent],
  selector: 'app-errortitle',
  templateUrl: './errortitle.component.html',
  styleUrls: ['./errortitle.component.css']
})
export class ErrortitleComponent implements OnInit {

  errorList: ErrorList[] = [
    { id: 1, title: 'Application Error', description:'Problems caused by malfunction in code.' },
    { id: 2, title: 'Unexpected Server Error', description: 'Interruptions caused by equipment.' },
    { id: 3, title: 'Service Error', description: 'Exceptions caused by malfunctions in APIs.' },
    { id: 4, title: 'Angular Error', description: 'Psycotic depresion that needs to call things 3x to make sure it works?' }
  ];

  constructor(private errcountcomponent: ErrorcountComponent) { }

  ngOnInit(): void {
  }

  toggleErrorCount(id: number) {
    /*Ilogical Operation*/
    this.errcountcomponent.error_id = id;
    /*this.errcountcomponent.fileterErrorCounter();*/
  }

}

errorcount.component.html

<table width="100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Count</th>
    </tr>
  </thead>
    <tr *ngFor="let errorcounter of fileterErrorCounter()">
      <td>{{errorcounter.date}}</td>
      <td style="text-align:right;">{{errorcounter.count}}</td>
    </tr>
</table>

errorcount.component.ts

import { Component, Input, OnInit } from '@angular/core';

export interface ErrorCounter {
  id: number,
  error_id: number,
  date: string,
  count: number
};

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

  @Input() error_id: number = 0;

  errorCounter: ErrorCounter[] = [
    { id: 1, error_id: 1, date: '20230101', count:201 },
    { id: 2, error_id: 2, date: '20230102', count:321 },
    { id: 3, error_id: 3, date: '20230103', count:431 },
    { id: 4, error_id: 1, date: '20230104', count:541 },
    { id: 5, error_id: 2, date: '20230105', count:651 },
    { id: 6, error_id: 3, date: '20230106', count:561 },
    { id: 7, error_id: 1, date: '20230107', count:471 },
    { id: 8, error_id: 2, date: '20230108', count:381 },
    { id: 9, error_id: 3, date: '20230109', count: 282 },
    { id: 10, error_id: 1, date: '20230110', count: 184 },
  ];

  constructor() { }

  ngOnInit(): void {
  }

  fileterErrorCounter(): ErrorCounter[] {
    alert(this.error_id);
    if (this.error_id > 0)
      return this.errorCounter.filter(f => f.error_id == this.error_id)
    else
      return this.errorCounter;
  }

}

在我看来：errortitle.component.hmtl 有一个 (click)="toggleErrorCount(errorlist.id)" 它应该使用它的 import { ErrorcountComponent } 中的内容来更改 @Input() error_id 的值：errorcount.component 中的数字.ts 并最终调用它的 fileterErrorCounter()——唯一的问题是调试在 countercomponent 处停了三次——第一次有值但其余的都清零了——我认为刷新永远不会发生。

我不确定这是否是在 Angular 上处理这个问题的方法，或者我是否需要某个地方的可观察对象，或者 @ViewChild，或者将其中任何一个放在哪里。我卡住了。

请在从 errortitle.component 中选择一个项目后帮助归档 errorcounter.component 的内容，而无需进行令人讨厌的刷新。

谢谢