Angular组件变量更新后未刷新问题求助

我正在做一个大学项目，需要开发一款展示其他应用数据的数据监控程序，要求用Rust，所以选了Tauri简化UI开发。现在遇到的问题是：在Angular中通过listen方法注册add_data事件的回调函数，在回调内更新组件的out属性，但前端页面并未随之刷新。以下是我的代码：

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

    title = 'trader-visualizer-tauri-2';

    out: string = "out";

    ngOnInit(): void {
        listen('add_data', (event: TauriEvent<number>) => {
            console.log("add_data event received");
            this.out = event.payload.toString();
        })
    }
}

<main>
    {{out}}
</main>

问题原因 #

Tauri的listen事件回调运行在Angular的变更检测机制之外，导致Angular无法自动感知到组件属性的变化，因此不会触发页面渲染更新。

解决方法 #

方法一：手动触发变更检测

1. 导入ChangeDetectorRef：

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

2. 在组件构造函数中注入ChangeDetectorRef实例：

constructor(private cdr: ChangeDetectorRef) {}

3. 在事件回调更新属性后，调用detectChanges()手动触发变更检测：

ngOnInit(): void {
    listen('add_data', (event: TauriEvent<number>) => {
        console.log("add_data event received");
        this.out = event.payload.toString();
        this.cdr.detectChanges(); // 手动通知Angular更新视图
    })
}

方法二：用NgZone包裹回调逻辑

1. 导入NgZone：

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

2. 在组件构造函数中注入NgZone实例：

constructor(private ngZone: NgZone) {}

3. 将回调内的属性更新逻辑包裹在ngZone.run()中，让代码运行在Angular的变更检测上下文内：

ngOnInit(): void {
    listen('add_data', (event: TauriEvent<number>) => {
        this.ngZone.run(() => {
            console.log("add_data event received");
            this.out = event.payload.toString();
        });
    })
}

两种方法都能解决页面不刷新的问题：方法一更轻量，适合简单的属性更新场景；如果回调内包含较多异步操作，方法二能确保所有相关逻辑都在Angular的上下文内运行，避免遗漏变更检测。

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