无需修改@Input属性，如何强制刷新Angular组件？

我正在学习Angular和TypeScript，开发了一个工时追踪小应用，包含两个组件：

• 一个用于创建新工时条目（员工+项目+工时+日期），带输入框和“添加”按钮；
• 另一个组件展示用户选定日期的已登记工时。

点击第一个组件的“添加”按钮后，展示组件需要从API/数据库刷新数据。搜索相关问题时，大部分方案都指向@Input参数，但展示组件的employeeId和date输入参数并没有变化，只是对应参数下的数据库内容更新了。我想过从容器组件调用展示组件的方法，但不知道怎么实现。

请问点击“添加”按钮后，怎么强制刷新这个展示组件？

补充代码 #

dailyHoursOverview.components.ts

import { HttpClient } from "@angular/common/http";
import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { Activity } from "../shared/Activity";
import { Employee } from "../shared/Employee";
import { Project } from "../shared/Project";

@Component({
    selector: "hour-daily",
    templateUrl: "./dailyHoursOverview.component.html"
})
export class DailyHoursOverview implements OnInit, OnChanges
{
 //   @Input() date: string = "";
    @Input() employeeId: number = 0;
    @Input() date: string = "";
    _http: HttpClient;

    entries: HourEntry[] = [];
    totalHours: number= 0;

    constructor(http: HttpClient) {
        this._http = http;
    }

    ngOnChanges(changes: SimpleChanges): void {
        this.refreshData();
    }

    ngOnInit(): void {
        this.refreshData();
    }

    refreshData() {
        this._http.get<HourEntry[]>("http://localhost:5257/Employee/" + this.employeeId + "/HourEntry/ByDay/" + this.date)
            .subscribe(
                result => { 
                    this.entries = result;
                    this.totalHours = this.entries.reduce((sum, entry) => sum + (entry.hours), 0); 
                },
                error => console.error(error)
            );
    }
}

interface HourEntry {
    project: Project;
    activity: Activity;
    employee: Employee;
    hours: number;
    date: string;
}

main.component.html（容器组件）

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-8">
            <hours-new [employeeId]="employeeId" [hourDate]="date" (entryCreated)="onEntryCreated();"></hours-new>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hour-daily [employeeId]="employeeId" [date]="date"></hour-daily>
        </div>
    </div>
</div>

newHourEntry.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Activity } from '../shared/Activity';
import { Project } from '../shared/Project';
import { Employee } from '../shared/Employee';
import { NewHourEntryDto } from '../shared/NewHoursEntryDto';

@Component({
    selector: "hours-new",
    templateUrl: "./newHourEntry.component.html"
})
export class NewHourEntryComponent implements OnInit {
    @Input() employeeId: number = 0;
    @Input() hourDate: string = "";
    @Output() entryCreated: EventEmitter<any> = new EventEmitter();

    private _http: HttpClient;

    employeeName: string = "";
    hourEntry: NewHourEntryDto;
    projects: Project[];
    activities: Activity[];

    constructor(http: HttpClient) {
        this._http = http;
        this.hourEntry = { "activityId": 0, "projectId": 0, "date": "", "hours": 0, "employeeId": 0 };
        this.projects = [];
        this.activities = [];
    }
    
    ngOnInit(): void {
        // 获取下拉框选项
        this._http.get<Project[]>('http://localhost:5257/Project')
            .subscribe({
                next: result => { this.projects = result; },
                error: error => console.error(error)
            });

        this._http.get<Activity[]>("http://localhost:5257/Activity")
            .subscribe({
                next: result => { this.activities = result; },
                error: error => console.error(error)
            });

        this._http.get<Employee>("http://localhost:5257/Employee/" + this.employeeId)
            .subscribe({
                next: result => { this.employeeName = result.name; },
                error: error => console.error(error)
            });
    }

    createHourEntry(): void {  // “添加”按钮点击事件
        this.hourEntry.date = this.hourDate;
        this.hourEntry.employeeId = this.employeeId;
        this._http.post("http://localhost:5257/HourEntry", this.hourEntry)
            .subscribe({
                next: result => { }, 
                error: error => console.error(error)
            });
        this.entryCreated.emit();
    }
}

方法一：通过ViewChild直接调用子组件的refreshData方法 #

这是最直接的方案，适配你的现有代码结构：

1. 在main.component.ts中引入ViewChild和展示组件：

import { Component, ViewChild } from '@angular/core';
import { DailyHoursOverview } from './dailyHoursOverview.components'; // 路径根据实际项目调整

2. 在容器组件类中获取展示组件实例，并在事件回调中调用刷新方法：

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html'
})
export class MainComponent {
  employeeId: number = 1; // 你的employeeId定义
  date: string = "2024-05-20"; // 你的date定义

  @ViewChild(DailyHoursOverview) dailyHoursComponent!: DailyHoursOverview;

  onEntryCreated() {
    // 直接调用展示组件的refreshData方法刷新数据
    this.dailyHoursComponent.refreshData();
  }
}

当点击“添加”按钮触发entryCreated事件后，容器组件会直接调用展示组件的刷新方法，重新从API拉取最新数据。

方法二：用RxJS Subject实现组件间通信（符合Angular响应式理念） #

如果后续组件结构变复杂，推荐用共享服务解耦组件：

1. 创建共享服务HourEntryService：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HourEntryService {
  private refreshTrigger = new Subject<void>();

  // 触发刷新信号
  triggerRefresh() {
    this.refreshTrigger.next();
  }

  // 暴露订阅刷新信号的接口
  getRefreshSignal() {
    return this.refreshTrigger.asObservable();
  }
}

2. 修改NewHourEntryComponent，创建条目成功后触发刷新：

// 引入共享服务
import { HourEntryService } from '../hour-entry.service';

// 构造函数注入服务
constructor(http: HttpClient, private hourEntryService: HourEntryService) {
  // 原有代码不变
}

createHourEntry(): void {
  this.hourEntry.date = this.hourDate;
  this.hourEntry.employeeId = this.employeeId;
  this._http.post("http://localhost:5257/HourEntry", this.hourEntry)
      .subscribe({
          next: result => { 
            // 条目创建成功后触发刷新信号
            this.hourEntryService.triggerRefresh();
          }, 
          error: error => console.error(error)
      });
}

3. 修改DailyHoursOverview组件，订阅刷新信号：

// 引入服务和订阅类
import { HourEntryService } from '../hour-entry.service';
import { Subscription } from 'rxjs';

// 组件类中添加订阅变量
private refreshSubscription!: Subscription;

// 构造函数注入服务
constructor(http: HttpClient, private hourEntryService: HourEntryService) {
  this._http = http;
}

ngOnInit(): void {
  this.refreshData();
  // 订阅刷新信号，收到后调用刷新方法
  this.refreshSubscription = this.hourEntryService.getRefreshSignal().subscribe(() => {
    this.refreshData();
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  if (this.refreshSubscription) {
    this.refreshSubscription.unsubscribe();
  }
}

这种方式让组件间没有直接依赖，扩展性更好，适合复杂项目。

方法三：临时修改Input触发ngOnChanges（不推荐，仅作备选） #

如果不想用上面的方案，可以通过临时修改date或employeeId触发ngOnChanges：

// 在main.component.ts的onEntryCreated方法中
onEntryCreated() {
  // 临时修改date值触发变更检测
  const tempDate = this.date;
  this.date = tempDate + '_temp';
  setTimeout(() => {
    this.date = tempDate;
  });
}

这种方法属于hack技巧，会额外触发一次不必要的变更检测，不推荐在生产环境使用。

内容的提问来源于stack exchange，提问作者Quido