AngularService的共享数据为何在HTML中未被更新?
创始人
2024-10-29 09:30:22
0

这通常是由于变化检测策略引起的。默认情况下,Angular采用的是Zone.js库中的ChangeDetectionStrategy.Default策略,每次数据绑定时都会重新检查组件中所有绑定的属性。这可能会导致性能问题,因此在某些情况下需要更改检测策略。

一种解决方法是将数据绑定到Observable或Subject,并使用AsyncPipe在HTML中进行订阅。在这种情况下,数据的推送将在异步上下文中触发更新。

例如:

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

@Injectable({ providedIn: 'root' }) export class DataService { private _dataSubject = new Subject(); data$ = this._dataSubject.asObservable();

updateData(newValue: number): void { this._dataSubject.next(newValue); } }

// component.ts import { Component } from '@angular/core'; import { DataService } from './data.service';

@Component({ selector: 'app-example', template: '

{{ value$ | async }}
' }) export class ExampleComponent { value$ = this.dataService.data$;

constructor(private dataService: DataService) {}

handleChange(newValue: number): void { this.dataService.updateData(newValue); } }

在上面的示例中,我们使用一个名为_dataSubject的Subject来存储数据,并将其公开为名为data$的Observable。在组件中,我们通过订阅value$来接收数据的更新,并在updateData方法中使用next方法来推送新数据。

请注意,每当数据更新时都会触发Angular的变化检测机制,这使得我们可以在HTML中看到新的值。

如果您不想使用Observable或Subject,可以考虑使用ChangeDetectionStrategy.OnPush策略。在这种情况下,只有当输入属性引用更改时(即,指针由一个对象指向另一个对象),才会触发变化检测。这可以提高性能并减少不必要的检测。

例如:

// component.ts import { Component, ChangeDetectionStrategy } from '@angular/core'; import { DataService } from './data.service';

@Component({ selector: 'app-example', template: '

{{ dataValue }}
', changeDetection: ChangeDetectionStrategy.OnPush }) export class ExampleComponent { dataValue: number;

constructor(private dataService: DataService) {}

ngOnInit() { this.dataService.data$.subscribe(newValue => { this.dataValue = newValue; }); }

handleChange(newValue: number): void { this.dataService.updateData(newValue); } }

在上面的示例中,我们在示例组件的元数据中添加了一个名为ChangeDetectionStrategy.OnPush的属性,告

相关内容

热门资讯

透视安卓版!aapoker怎么... 透视安卓版!aapoker怎么设置提高好牌几率(透视)ai插件(一贯存在有挂)1)aapoker怎么...
透视黑科技!aapoker怎么... 透视黑科技!aapoker怎么提高中牌率(透视)ai插件(好像真的有挂);1、完成aapoker怎么...
透视存在!aapoker怎么提... 透视存在!aapoker怎么提高中牌率(透视)发牌逻辑(切实真的是有挂)小薇(透视辅助)致您一封信;...
透视规律!aapoker俱乐部... 透视规律!aapoker俱乐部靠谱吗(透视)脚本(真是存在有挂)1、透视规律!aapoker俱乐部靠...
透视代打!aapoker怎么选... 透视代打!aapoker怎么选牌(透视)万能辅助器(都是真的是有挂)一、aapoker怎么选牌AI软...
透视模拟器!aapoker怎么... 透视模拟器!aapoker怎么拿好牌(透视)免费透视脚本(果然真的有挂)1、操作简单,无需注册,只需...
透视有挂!aapoker辅助插... 透视有挂!aapoker辅助插件工具(透视)透视脚本(竟然存在有挂);1、下载好aapoker辅助插...
透视肯定!aapoker脚本怎... 透视肯定!aapoker脚本怎么用(透视)插件下载(竟然有挂)aapoker脚本怎么用辅助器中分为三...
透视中牌率!aapoker辅助... 透视中牌率!aapoker辅助器怎么用(透视)透视软件(确实有挂)运aapoker辅助器怎么用辅助工...
透视苹果版!aapoker破解... 透视苹果版!aapoker破解侠是真的吗(透视)发牌逻辑(果然是真的有挂)暗藏猫腻,小编详细说明aa...