标签: angular2-changedetection

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

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

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

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

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

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

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

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

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

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

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 …

我想能够在angular2之外的变量发生变化时观察和更新.所以,假设我在外部javascript文件中有这个:

var test = 1;

如何将此变量绑定到组件中的属性？

@Component({
   ...
})

export class MyComponent {
    watchy = window.test;
}

根据这个答案,显然这应该是有用的.
但事实并非如此.如果我在控制台中更改变量,则变量不会更新显示在模板中.我错过了什么吗？

始终使用Angular-2项目是合理的约定吗

changeDetection: ChangeDetectionStrategy.OnPush

在组件的装饰器中？除非有明确的理由使用默认策略？

Youtube视频演示了这个问题

演示应用程序的Github存储库

我有一个非常简单的应用程序,包含应用程序组件,子组件(帐户),处理消息对话框组件的警报服务(弹出模式).

出于演示目的,我有两个相同的形式,一个在app.component.ts内,一个在account.component.ts内.每个人都有一个按钮,可以调用警报服务来显示消息对话框模式.

问题是,当我单击子组件的表单的输入字段(account.component.ts)和"按键盘上的输入"时,我收到此错误

EXCEPTION:./AccountComponent类中的错误AccountComponent - 内联模板:2:2导致:表达式在检查后发生了更改.上一个值:'true'.当前值:'false'.请注意,在下面提到的任何其他情况下都不会出现此错误

1. 如果我单击按钮而不是按键盘上的Enter键

2. 即使按Enter键,app.componen.ts中的表单也没有任何问题.它似乎只是子组件(accouunt.component.ts).

3. 如果我点击account.component的输入,输入内容,点击按钮,没有显示错误,删除输入,按回车,现在没有显示错误比较之前

我调查了SO和google,似乎人们遇到了同样的问题并通过调用change detect来解决它.但是,我已经尝试过并把它放在诸如模态显示之后的地方并且它不起作用.此外,如果这将解决它,那么它不解释为什么app.component.ts中的表单不会导致我这个错误.

下面是一些代码片段,完整的演示项目可以在上面的github链接中找到.这个问题困扰了我好几天.非常感谢您的帮助.

app.component.html

<label>This form is from app.component.html</label>
<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
    <input placeholder="Old Password" formControlName="oldPassword">
    <button class="btn btn-success">Update Password</button>
</form>

<br><br><br><br>

<label>This form is from account.component.html</label>
<router-outlet> </router-outlet>

<template ngbModalContainer></template>

app.component.ts

export class AppComponent implements OnInit {

    private changePasswordForm: FormGroup;

    constructor(
      private formBuilder: FormBuilder,
      private alertService: AlertService,
    ) { }

    ngOnInit() {
      this.changePasswordForm = this.formBuilder.group({
        oldPassword: [''],
      })
    }

    onUpdatePassword() {
      this.alertService.alertPopup('test2', 'asfafa')
    }
}

account.component.html

<form …

我们的团队(不仅是我的电脑)对Angular 2有一个奇怪的渲染问题,这只发生在Chrome中.

也就是说,在应用程序导航或在应用程序中期刷新时,DOM中的许多项目都是不可见的.例如.其中包含文本的段落和标题,但不为最终用户呈现文本,但文本在检查器DOM中可见.

如果在检查器中编辑随机CSS属性,DOM将重新获得可见性.这个CSS甚至不必适用于手头的隐形DOM项目,ala.不可见的项目可以是标题中的一个段落,并且打开/关闭随机页脚跨度的顶部位置将使标题段落重新获得可见性.

在切换随机CSS元素之前

切换随机CSS元素后

这种情况发生在应用了固定加载程序的页面上,例如.具有固定位置,超高z指数并包含整个屏幕的组件.显示此页面加载器直到ngOnInit完成,这意味着它在大多数情况下都非常快.禁用此加载程序似乎解决了这个问题.

当页面加载后加载var值时,有时会在{{var}}标记中发生这种情况.

我们尝试用任何一个切换装载机

*ngIf="true/false"

要么

[style.display]="block/none"

这些解决方案都不起作用,一些dom仍然是看不见的.

有没有人知道为什么会这样？

我有一个简单的警报组件，该组件正在视图中动态创建。由于它是动态创建的，因此我设置了一个选项，在初始化警报后自动显示该警报。

尽管它可以正常工作，但我想了解为什么在这种特殊情况下为什么必须手动触发更改检测。

码：

export class OverlayMessageComponent implements AfterViewInit {
    ...

    ngAfterViewInit() {
        if(this.autoShow) {
            this.show();
        }
        this.changeDetector.detectChanges();
    }

    ...
}

完整样本： https : //plnkr.co/edit/8NvfhDvLVBd71I7DR0kW

我遇到this.changeDetector.detectChanges();以下错误时必须添加：

例外：检查表达式后，表达式已更改。

我的印象是使用AfterViewInit有助于避免该问题，但我认为我认为这是错误的。有没有一种方法可以更好地结构化代码以避免这种错误？

我想更好地理解为什么返回此错误。我之前已经看过几次这个错误，而且我知道有人说使用a setTimeout()或enableProdMode()确实可以解决问题，但是对我来说，当框架本身通知您存在问题时，这似乎是一种错误的解决方法。

遇到了这个问题并在互联网上搜索了fixture.detectChanges(),当显式插入模拟数据时,它无法识别@Input()中的变化.有大量的线程和文档描述了设置,但不一定是为什么它会导致我的所有测试都破坏.

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改.

删除fixture.detectChanges()似乎"解决"了这个错误.但是现在没有检测到任何新模拟数据(按规格)的插入.

例:

TestComponent.ts

import { TestComponent } from './test-component';
import { TestComponentModule } from './test-component.module';
import { Data } from './interfaces/data';

export class TestComponent {
    @Input() data: Data;

    displayData(){ 
        let firstName = data.first;
        let lastName = data.last;
        let fullName = firstName + ' ' + lastName;
        return fullName;
    };
}

TestComponent.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test-component';
import { TestComponentModule } from './test-component.module';

class DataMock {
    data: Data = getDataMock({
        first: …

我最近将Angular应用程序从4.3升级到5.0，并尝试使用其中的一些新功能。其中之一是从zone.js中删除依赖项。

main.ts：

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZone: 'noop',
});

零件：

import { ApplicationRef, Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Rx';

import { MenuService } from '../../services/menu.service';

@Component({
  selector: 'ba-menu',
  templateUrl: './baMenu.html',
  styleUrls: ['./baMenu.scss'],
})
export class BaMenu {
  menuItems: any[];
  protected _menuItemsSub: Subscription;
  protected _onRouteChange: Subscription;

  constructor(public _router: Router, public _service: MenuService, public app: ApplicationRef) {
    console.log('constructor triggered'); //This worked
    this.app.tick();
  }


  ngOnInit(): void {
    console.log('ngOnInit() triggered'); //This doesn't worked
    this._onRouteChange = …