标签: angular2-changedetection

我知道如果我在模板中使用方法调用，它会一遍又一遍地执行（不理想）。我已经通过使用纯管道和记忆方法的组合解决了这个问题。但我也在使用反应式表单，并在我的模板中使用 myFormGroup.get('myFormControl').value 来获取值。这是否也会像我的组件中的方法一样重复执行，或者 Angular 是否有适当的策略来防止这种情况发生？一个用法示例是使用 *ngIf 并让条件基于表单的值。

此外，我目前没有遇到任何性能下降，但我想在使用此应用程序走得太远之前以最佳方式实现这一点（并且只是好奇）。

我可以轻松地更新它以直接引用表单对象上的属性，我只是更喜欢方法调用的语法。任何见解都会有所帮助，谢谢！

在我的应用程序中,我想设置手动更改检测.为此,我将ChangeDetectionStrategry设置为OnPush,每当组件发生更改时,我使用detectChanges手动运行更改检测.

如果我在父组件上将ChangeDetectionStrategy设置为OnPush,根据我的理解,它将仅在父组件上运行一次更改检测,在子组件上只运行一次,即使我没有在子组件上将ChangeDetectionStrategy设置为OnPush.如果父组件有任何更改,我在父组件中运行detectChanges().如果子组件有任何变化,我在子组件中运行detectChanges().

请建议这是正确的方法吗？还是有更好的方法吗？

其次,有没有办法检查它是否按预期工作,并且没有对特定组件执行更改检测.

我有一个Angular组件,可以在其自身内部动态创建各种其他类型的组件.它@Input通过OnChanges钩子将自己的属性绑定到子组件属性.

当子组件的更改检测设置为"默认"时,此绑定可正常工作.然后检测新输入并更新组件模板.

但是,当更改检测为OnPush时,它不起作用,则不会检测到更改.我相信应该检测到更改,因为新的不可变对象(字符串)被分配给组件@Input属性.

这是一个演示的插件:https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

如何将此父级到动态子属性绑定与ChangeDetectionStrategy.OnPush一起使用？

我无法在插件中进行最小化的再现,但是在我的应用程序中,我有一个无限循环,其中ngDoCheck根组件被无限调用,所以我希望能够识别实际发生了什么变化.

我已经查看了堆栈跟踪中的每个调用,从中放入一个断点,ngDoCheck但找不到任何有用的东西.

我知道,从触发变化检测中变化检测可能会导致这种无限循环的(虽然我想调试模式下,我已经启用,会抓住它),但我不能手动找到这个任何实例.

是否有任何人可以记录或检查,以便洞察导致一轮变化检测的原因？

可能不是很有用,但是在这个循环中有一个堆栈和事物状态的快照:

iOS 移动浏览器（Safari、Chrome）和桌面/Android Chrome 之间的 Angular 变化检测有什么区别吗？

我刚刚使用 http-server npm 包（通过 webpack）为我的 Angular 应用程序提供服务。在 android 设备应用程序工作得很好。在桌面上也是如此。

但是在 iOS 网络浏览器上存在一些问题。不显示异步获取的数据。ChangeDetectorRef 和 NgZone 都不会改变任何东西。此外，在某些情况下，?.操作员不工作。

有没有人知道 iOS 上的 Angular 有任何常见的陷阱？

我不明白为什么即使我使用ChangeDetectionStrategy.OnPush和changeDetectorRef.detach()函数ngDoCheck一直被调用.我的应用程序中有数千个组件,如果从child2引发了一个事件(鼠标点击等),我想阻止child1的changeDetection.

这是一个掠夺者

如你所见,我有一个父组件

@Component({
  selector: 'my-app',
  template: `     
    <app-child1 test="test"></app-child1>
    <app-child2 test="test"></app-child2> `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  test = 'test';

constructor() { }

  ngDoCheck() {
    console.log("### ngDoCheck app component");
  }
}

和2个相同的孩子:

@Component({
  selector: 'app-child1',
  template: `<input type="text" [(ngModel)]="test" /><br/> `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Child1Component implements OnInit {
  @Input()
  test: string;

  constructor(public cd: ChangeDetectorRef) { }

  ngAfterViewInit() {
      console.log("###### DETACH child 1");
      this.cd.detach();

  }

  ngDoCheck() {
    console.log("### ngDoCheck child 1");
  }
}

如果我开始输入child1的输入,则调用child2的ngDoCheck函数.

想想有成千上万的孩子,它真的很慢...... …

这是一个臭名昭著的错误，在开发人员中拥有相当多的“追随者”，但众所周知，调试起来非常棘手。日志是这样的

PersonalSituationComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
at viewDebugError (core.es5.js:8434) [angular]
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [angular]
at checkBindingNoChanges (core.es5.js:8576) [angular]
at checkNoChangesNodeInline (core.es5.js:12455) [angular]
at checkNoChangesNode (core.es5.js:12429) [angular]
at debugCheckNoChangesNode (core.es5.js:13209) [angular]
at debugCheckRenderNodeFn (core.es5.js:13149) [angular]
at Object.eval [as updateRenderer] (PersonalSituationComponent.html:3) [angular]
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131) [angular]
at checkNoChangesView (core.es5.js:12251) [angular]
at callViewAction (core.es5.js:12618) [angular]
at execEmbeddedViewsAction (core.es5.js:12596) [angular]
at checkNoChangesView (core.es5.js:12250) [angular]
at callViewAction (core.es5.js:12618) [angular]

并没有真正的帮助。如果在 html …

Angular 4. Github来源

我有一个由Web服务填充的菜单.Web服务位于taskService中,但现在不是必需的.

ngOnInit() {
    this.getTasks();
    }
    getTasks(): void {
        this.taskService.getTasks()
            .subscribe(Tasks => this.tasks = Tasks);
    } 

当您单击某个任务时,它会加载一个页面,一个不同的组件,表单已准备好更新数据.它也是由Web服务制作的,工作正常.问题是更新任务后,它没有反映在任务菜单中

我正在导入这个:

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

并将其添加到构造函数:

private cdRef: ChangeDetectorRef

在使用save()函数更新数据之后,这是我对detectChanges()函数的最佳方法

  this.taskService.updateTask(task, id)
          .subscribe(
              this.Ref.detach();
              setInterval(() => {
                this.Ref.detectChanges();
              }, 5000);
      );

这是从菜单中打印任务的html:

   <li *ngFor="let task of tasks" class="d-inline-block col-md-12">
        <a routerLink="/task/{{task.id}}" > {{task.title}}</a>
        <!-- <span class="close big"></span> -->
        <button class="close big" title="delete task"
        (click)="delete(task)">x</button>
    </li>

这是更新任务的表单

<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
  <mat-form-field class="example-full-width">
    <label>Task …

我正在尝试从中选择一组选项中的第一个值 <mat-autocomplete ...>

export class ExampleComponent implements OnInit, AfterViewInit {

@ViewChildren('auto') matAutocomplete: QueryList<any>;

constructor(private cdr: ChangeDetectorRef) { }

ngAfterViewInit() {
    this.foundItemsList.changes.subscribe(options => {
        // ---> This simply works!
        setTimeout(() => this.matAutocomplete.first._keyManager.setFirstItemActive(), 0);

        // ---> This doesn't works?! No error shown, it just seems that the above function isn't called at all. 
        this.matAutocomplete.first._keyManager.setFirstItemActive()
        this.cdr.detectChanges();
    });
}

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete.ts

AFAIK,detectChanges检查当前组件及其所有子组件的变化检测器是什么,对吗？但似乎它在上面的场景中不起作用.

我正在尝试创建一个PowerShell脚本来打开Internet Explorer,导航到https://clockify.me/login,填写电子邮件和密码输入并提交表单或单击登录按钮.

问题是,在使用以下方法填充输入时:

• document.getElementById("email").value="123"
• document.getElementById("password").value="123"

我有以下结果:

• 当我提交表格时document.forms[0].submit(),网页重新加载网址https://clockify.me/login?email=&password=并且没有任何反应
• 当我单击按钮,使用javascript或手动时,它认为输入为空

那么,有没有办法解决这个问题？使用纯粹的javascript或PowerShell(我希望保持IE窗口不可见)

谢谢!