我有一个显示动态只读数据的组件。例如： {{getText()}} 我注意到 Angular 一遍又一遍地调用 getText，即使看起来没有必要这样做，我...
如何检查传递的引用是否是 Angular 中特定 ViewChild 引用的实例
我的 .ts 文件中有一个 viewchild 引用，例如， @ViewChild('someDialog') someDialog: ElementRef; 在 .html 文件中，我将引用传递回函数，例如， 我的 .ts 文件中有一个 viewchild 引用，例如， @ViewChild('someDialog') someDialog: ElementRef; 在 .html 文件中，我将引用传递回类似的函数， <abc-dialog #someDialog (close)="onDialogClose(someDialog)"></abc-dialog> 在我的 .ts 文件中，我想检查传递的 onDialogClose() 函数的引用是否等于 someDialog 视图子引用。 非常感谢任何帮助，谢谢。 更改您的 ViewChild 来查找组件。 @ViewChild('someDialog', { read: AbcDialogComponent }) someDialog: AbcDialogComponent; 或 @ViewChild(AbcDialogComponent) someDialog: AbcDialogComponent;
为什么我需要使用ChangeDetectionStrategy？
我正在使用 Ionic 2。 这是我的代码： ... 我正在使用 Ionic 2。 这是我的代码： <div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let i = index;let first=first;let last = last;"> {{last ? callFunction() : ''}} <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser" > {{checkdate(chat.date)}} <p class="chat-date" id="abc" #abc>{{msgdate | amDateFormat:'LL'}}</p> </div> 这是我的checkdate功能： checkdate(date) { var res = date.split(" "); var A=res[0]; var local=localStorage.getItem('chatdate'); this.msgdate=""; if(local === undefined || local === null) { this.msgdate=A; localStorage.setItem('chatdate',this.msgdate); } else if(local !== undefined) { console.log(local != A); if(local != A) { this.msgdate = A; localStorage.setItem('chatdate',this.msgdate); } } } callFunction(){ this.content.scrollToBottom(0) } 它正在工作。但我收到此错误： FIREBASE 警告：用户回调引发异常。错误：表达式在检查后发生了变化。先前值：“2017 年 4 月 10 日”。当前值：''。 因为，我通过在代码中添加这些行来实现此功能： import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'page-chat', templateUrl: 'chat.html', }) 现在，我没有收到任何错误消息。但内容不显示。 我安慰了聊天值。运行良好。但它并没有显示任何价值。 同时，当我返回后退按钮时，内容确实显示一秒。 如果我删除ChangeDetectionStrategy， 我再次收到此错误消息： FIREBASE 警告：用户回调引发异常。错误：表达式在检查后发生了变化。先前值：“2017 年 4 月 10 日”。当前值：''。 为什么我需要使用ChangeDetectionStrategy？ UI 值不显示。 说真的，您正在检查模型后修改其状态。如果不绑定到变量，你就不应该这样做。删除 this.msgdate="";
我的问题是关于角度变化检测和zonejs：下面的（点击）事件使用zonejs吗？ @成分（{ 模板：` 更改姓名 我的问题是关于角度变化检测和zonejs：下面的(click)事件使用了zonejs吗？ @Component({ template: ` <button (click)="changeName()">Change name</button> <p>{{ name }}</p> ` }) export class AppComponent { name = 'John'; changeName() { this.name = 'Jane'; } } 我的问题背后的原因是，大多数用于说明 zonejs 目的的示例都提到 setTimeout 或 http 调用，但很少像上面这样简单的 (click) 事件。 编辑：非常欢迎任何在 zonejs 源代码的相关部分设置断点的提示。 根据他们的 README，zone.js 修补了 Web API，其中还包括 DOM 事件。他们还有一个完整的事件列表，其中包括click事件。对于基于区域的应用程序，Angular 有必要知道何时需要更新视图。 所以你的问题的答案是：是的，本例中使用了zone.js。 （除非您的应用程序使用zoneless更改检测）
Angular Zoneless：更改基于对象的信号的属性值会意外更新视图
我有一个使用无区域更改检测的 Angular v18.2 应用程序： 导出const appConfig：ApplicationConfig = { 提供商：[provideExperimentalZonelessChangeDetection()、provideRouter(ro...
如果我在角度模板中使用Map.get('key1')，变化检测机制是否每个周期都会检查地图值？
我知道在 Angular 中从模板调用表达式不是一个好的做法，因为 Angular 无法预测函数的返回值是否已更改，因此它需要执行该函数
ViewChild 更改检测抛出 ExpressionChangedAfterItHasBeenCheckedError
我有自定义的 Angular 组件模态组件，它充当 MatModalDialog 的代理，并以 ngTemplateOutlet 作为 mat-dialog-content 的主体。 我有自定义的 Angular 组件 modal-component，它用作 MatModalDialog 的代理，其中 ngTemplateOutlet 作为 mat-dialog-content 的主体。 <mat-dialog-content class="modal-dialog-medium"> <ng-container *ngIf="dialogData.ngTemplateOutlet" [ngTemplateOutlet]="dialogData.ngTemplateOutlet"></ng-container> </mat-dialog-content> 我还有用于表单的自定义 Angular 组件 form-component - 输入表单和控件的一些配置。 这个 form-component 有 getter 方法 valid，它返回 boolean，表明 formGroup 是否有效。 提交按钮位于 form-component 外部 - mat-dialog-actions 内部，需要根据表单是否有效来禁用此按钮。这是通过注入的回调来确保的 MAT_DIALOG_DATA //this.matDialog.open(ModalComponent, {data: .... ngTemplateOutlet: this.formTemplate, okButtonDisabled: () => !this.formComponent?.valid <!-- modal-component --> <button-component (click)="dialogData.okButtonAction && dialogData.okButtonAction()" [disabled]="dialogData.okButtonDisabled && dialogData.okButtonDisabled()" [text]="dialogData.okButtonText || 'OK'"></button-component> 正如我所说，modal-component的主体是ngTemplateOutlet，所以我的模板看起来像这样： <ng-template #formTemplate> <form-component *ngIf="formFields" [config]="formConfig" [fields]="formFields" #formComponent (onSubmit)="submit()"></form-component> </ng-template> 参考元素： @ViewChild('formTemplate') formTemplate: TemplateRef<any>; @ViewChild('formComponent') formComponent: FormComponent; 当我调用 this.matDialog.open(...) 时，ngTemplateOutlet 渲染到视图中，并且 FormComponent.valid 返回 false。视图渲染后，FormComponent.formGroup被初始化并且FormComponent.valid变为true。这会在 Expression has changed after it was checked 上触发 [disabled]。 这些天我已经遇到过这个错误几次，并且我无数次地研究了更改检测和这个错误，试图找出如何实现一个不会触发此错误的干净解决方案，但我一直无法（我通过在 ngAfterContentChecked 中调用更改检测修复了 2 个类似的错误，但我无法在这里修复它，而且坦白说我不喜欢它）。 我错过了什么吗？还是我只是做错了？ 您可以只使用 static 的 ViewChild 属性，这将在设置为 true 时在更改检测运行之前评估视图子级，并可能消除错误！ 静态 true 表示在更改检测运行之前解析查询结果， false 表示在更改检测之后解析。默认为 false。 @ViewChild('formTemplate', { static: true }) formTemplate: TemplateRef<any>; @ViewChild('formComponent', { static: true }) formComponent: FormComponent;
我在 Angular 应用程序中的事件发射器的订阅回调中更新组件属性 (isEdit) 时遇到问题。 语境： 我有一个 CreateComponent 负责...
使用反应式表单和 ChangeDetectionStrategy.OnPush 显示验证消息
我正在尝试将应用程序迁移为使用 ChangeDetectionStrategy.OnPush。然而，我在尝试使用一些反应形式时遇到了一些阻碍。 我有一个可重复使用的控件，显示
我对 Angular 中这个循环的行为有点困惑： 一个包含 5 个字段的数组的简单 *ngFor 循环 我对 Angular 中这个循环的行为有点困惑： 对 5 个字段的数组进行简单的 *ngFor 循环 <div *ngFor="let field of this.fields" > <div class="block">{{ field.title }} : {{getValue(field)}}</div> </div> 函数getValue是 getValue(field) { console.log("getValue: "+ this._counter++, field.title); return field.name; } 鉴于数组只有 5 个字段，我预计函数 getValue 仅执行 5 次（或数组中的项目数），但正如您从 this fiddle 中看到的，它在第一次运行时执行 20 次，状态的任何变化都会使其再运行 10 次。 （从控制台读取） 事实上，当页面加载时，只有 1 个项目的数组将运行 4 次，任何状态更改都会导致它运行两次。 在具有数百个数组和运行以获取数据的复杂函数的正确应用程序中，这一点变得更加明显。 对于 Angular 的所有版本来说，这似乎都是相同的（至少是我从 v4-v16 测试过的版本） 所以我想知道。首先，为什么它执行这么多次，其次，考虑到有一个复杂的函数来返回数据，是否有更有效的方法来循环数组？ 每次将函数写入 .html 中的插值时，Angular 都应该每次执行以了解“某些内容是否已更改”。 当你使用变量时，Angular 会将变量的值与旧值进行比较，但如果你使用函数，Angular 应该执行该函数来获取实际值。 您可以尽量减少使用 ChangeDetectionStrategy.OnPush（这有更多含义，使用前务必了解）。 如果你写一个简单的，就会发生平等 {{getValue()}} getValue() { return "hello word" } 总的来说，这就是当我们有循环时我们应该避免使用 .html 中的函数的原因。如果是数组，你可以写一些像 this.fieldsExtends=this.fields.map(x=>({...x,value:this.getValue(x)})) 并且您可以迭代 fieldExtends <!--NOTE: in .html remove the "this", the only variables that you can show are the public variables of your component--> <div *ngFor="let field of fieldsExtends" > <div class="block">{{ field.title }} : field.value}</div> </div> 更改检测在开发服务器中运行两次，所以也许这就是 10 变成 20 的原因。 在视图初始化之前运行更改检测，这可能是前 10 条记录的属性！ 此更改检测后再次运行，以便剩余 10 条记录的属性 当您向数组中添加一行时，每个数组元素内的数据有可能已更改，因此每个 get 方法都会运行更改检测！ 代码 ngDoCheck main.ts:37 getValue: 0 test main.ts:37 getValue: 1 test main.ts:37 getValue: 2 test main.ts:37 getValue: 3 test main.ts:37 getValue: 4 test main.ts:42 ngAfterViewInit main.ts:37 getValue: 5 test main.ts:37 getValue: 6 test main.ts:37 getValue: 7 test main.ts:37 getValue: 8 test main.ts:37 getValue: 9 test chunk-7ESZLVZO.js?v=76da9c7e:19762 Angular is running in development mode. main.ts:50 ngDoCheck main.ts:37 getValue: 10 test main.ts:37 getValue: 11 test main.ts:37 getValue: 12 test main.ts:37 getValue: 13 test main.ts:37 getValue: 14 test main.ts:37 getValue: 15 test main.ts:37 getValue: 16 test main.ts:37 getValue: 17 test main.ts:37 getValue: 18 test main.ts:37 getValue: 19 test 堆栈闪电战 如果你问是否有更好的方法，是的，信号可以用来弥补这个问题，你可以使用computed来执行复杂的计算，这些计算只有在根信号发生变化时才会被验证，因此它的控制更细粒度需要更改检测来运行更少的次数，从而提高性能 这是我对信号和变化检测的理解，请持保留态度:)
我需要在不破坏任何逻辑的情况下更新项目的 UI（我破坏了）。 在旧的 UI 身份验证（登录页面）和其余部分（身份验证后您可以访问的其他资源）中...
角度测试和变更检测：fixture.detectChanges() 仅在测试中有效一次。为什么？
我尝试测试一个简单的组件： HTML： 我尝试测试一个简单的组件： HTML： <ng-container *ngIf="lessThanTen(value) else moreThanTen"> <div class="circle" [ngClass]="{'active': isActive}" > {{value}} </div> </ng-container> <ng-template #moreThanTen> <div class="rounded-rectangle" [ngClass]="{'active': isActive}" > {{value}} </div> </ng-template> TS： export class MatchesCounterComponent { @Input() public value: number; @Input() public isActive: boolean; public lessThanTen(value: number): boolean { return value < 10; } } 并测试： describe('MatchesCounterComponent', () => { let component: MatchesCounterComponent; let fixture: ComponentFixture<MatchesCounterComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [MatchesCounterComponent], }).compileComponents(); fixture = TestBed.createComponent(MatchesCounterComponent); component = fixture.componentInstance; fixture.detectChanges(); // IF REMOVE IT ALL WORKS CORRECT }); it('should render circle if value is less than 10', () => { component.value = 5; fixture.detectChanges(); // DOESN'T WORK const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('.rounded-rectangle')).toBeNull(); expect(compiled.querySelector('.circle')).not.toBeNull(); }); }); 问题： 测试失败，因为变化检测器没有第二次触发 问题： 为什么fixture.detectChanges()在“it”块中第二次不起作用？ （value未定义，但我直接改了：component.value = 5）。 如果我从 beforeEach 块中删除fixture.detectChanges() - 一切正常。 如果我通过 Fixture.componentRef.setInput() 设置值 - 一切正常。 但我真的很感兴趣 CD 在这段代码中是如何工作的。 您的组件是否使用ChangeDetectionStrategy.OnPush？如果是这样，请将其包装在测试主机中，因为测试中 OnPush 组件的更改检测存在问题。测试主机可以用作解决方法。
我正在开发一个带有侧边栏组件的 Angular 应用程序，该组件根据用户的数据显示不同的菜单项。如果用户没有，菜单应该只显示“Empresas”选项
一旦我在 cites.component.ts 中进行更改，我想触发 Analysis.component.ts 中的更改 导航.service.ts @Injectable() 导出类导航服务{ 私人更新面包屑$：
如何在 Angular 中使用 ngx-translate 平移对象而不强制重新渲染？
在我们的 Angular 应用程序中，我们有一个内部库，其中包含多个组件（例如标头...），我们在 Angular 应用程序中动态使用它们，并向它们传递一些属性（例如 s...
错误ExpressionChangedAfterItHasBeenCheckedError究竟如何与角度检测一起工作？
我读了很多文章，但仍然不明白一些角度变化检测的情况。我得到以下示例： Angular 应用程序实现了 OnInit、AfterViewInit、DoCheck、AfterViewChecked...
Angular：错误 TypeError：this.panZoomAPI.panDelta 不是函数
我做了一个小->stackblitz <- to demonstrate my issue. I have a master component that has pan-zoom within which there's a parent component that holds some content (the children). The li...
我在 Angular 项目的 *ngFor 指令上添加了一些 trackBy 函数，以提高性能。 有一个组件有 2 个项目列表。 trackBy 函数对于这两个列表都是相同的...
在 Angular 中从模板检查多个表单值的正确方法是什么？
有一堆有效的搜索组合，我想禁用表单，除非输入了有效的搜索字段。目前我有一个方法 isValidSearchCombo() 我正在从 te...
我想根据最高的项目更新 *ngFor elements' 中的每个项目高度。这个想法是从 ViewChild 获取每个高度，然后将输出发送到容器，然后推送它（或通过可观察的 s ...