标签: angular2-changedetection

我正在渲染器过程中构建一个角度为2的电子应用程序.我的主进程与套接字服务器通信.每当用户连接到此服务器或断开连接时,我希望在视图中显示用户的状态.

为此,我使用电子的ipc从主要向渲染器进程发送消息,就像这样

socket.on('connect', function() {
  mainWindow.webContents.send('socket-connection-status', true);
});
socket.on('disconnect', function() {
  mainWindow.webContents.send('socket-connection-status', false);
});

在我看来,我有一个(简化的)角度组件,就像这样

const ipc = require('electron').ipcRenderer;
@Component({
  selector: 'status-bar',
  template: '{{status}}'
})
export class StatusBarComponent {
  private status: string = "offline";
  constructor() {
    ipc.on('socket-connection-status', function(event, status) {
      if (status===true) {
        this.status = 'online';
      } else {
        this.status = 'offline';
      }
      console.log(status);  // Successfully logs true|false
      console.log(this.status);  // Successfully logs online|offline
    })
  }
}

我成功地从主进程记录消息.

问题是角度2不"知道"电子的ipc,因此不会触发变化检测status.我看到有几个人在努力解决这个问题,但没有遇到过"真正的"解决方案.

我试图与注射来解决它ApplicationRef,ChangeDetectorRef和ngZone(参考:手动触发Angular2变化检测),但没有提供的方法(tick() …

我想知道是否有人可以对此进行详细说明。是否@Input()与二传手VS使用@Input()不同的问候没有制定者的行为来改变检测？

例如：

@Input() something: SomeType; 

-vs-

private _something;

@Input() set something(something: SomeType ) {
  this._something = something;
}

get something(): SomeType {
  return this._something;
}

明显的区别是设置器/获取器允许@Input()使用一些额外的逻辑。但这是否会以与@Input()不使用setter的情况不同的方式影响变更检测？

我正在学习Angular变化检测过程并检查Chrome中的开发工具,我看到了奇怪的行为.

我的plnkr演示了这种行为:http://plnkr.co/edit/cTLF00nQdhVmkHYc8IOu

我有一个简单的组件与视图:

<li *ngFor="let item of list">{{item.name}}</li>

和构造函数:

constructor() {
    this.list = [{name: 'Gustavo'}, {name: 'Costa'}]

模拟我添加的简单请求:

// simulating request repaint the DOM
setInterval( () => {
  this.list = [{name: 'Gustavo'}, {name: 'Costa'}];
}, 2000);

如果您注意到,数组list会收到一个等于初始值的列表.让我们假设当Angular在变更检测过程中检查视图中的值时,我们有这样的代码:

if( oldName !== name )  { // ( 'Gustavo' !== 'Gustavo')
 // update the view
}

但是值是相同的,为什么角度每2秒重复一次DOM.？

但如果我改变对象,则不会发生REPAINT

// simulating request there is not repaint
setInterval( () => {
  this.list[0].name = "Gustavo"; // no repaint because it's …

假设我有一个像这样的组件结构:

AppComponent
    HeaderComponent
    ContentComponent
        TodosComponent
            TodoComponent

如果我设置HeaderComponent的changeDetection到ChangeDetectionStrategy.OnPush和改变TodoComponent,仍然HeaderComponent的东西ngDoCheck(),ngAfterViewChecked()和ngAfterContentChecked()被触发.

我错过了什么？无论如何都会触发ngDoCheck吗？如果是,如何确定ChangeDetection是否检查了组件？

我正在查看ngrx repo中定义的example-app:https: //github.com/ngrx/platform/tree/master/example-app

我可以看到该ChangeDetectionStrategy.OnPush属性仅在"容器"组件上设置,而虚拟组件不会覆盖默认的更改检测策略.

任何人都可以解释原因吗？我希望应用程序中的所有组件都能使用 ChangeDetectionStrategy.OnPush

谢谢,

瞎扯

说，我有一个组件，其用法如下：

 <health-renderer
      [health]="getHealth()"
      [label]="label">
 <health-renderer>

从https://angular.io/guide/template-syntax读取与数据绑定相关的部分后，似乎我设置目标组件属性的方式health是错误的，因为所使用的模板表达式getHealth()是一种方法。方法绑定应该仅通过事件完成，而不是属性。换句话说，模板表达式（位于右侧的东西=）必须是模板变量，模板引用变量或组件/指令/元素属性。

如果[target]="methodCall()"做绑定的方法错误，那么为什么Angular会允许呢？如果这是进行绑定的正确方法，那么我在上一段中给出的理解是错误的吗？

另外，我该如何修改代码以反映以下方面的正确内容：

1. 显示当前的健康状况，例如进度条
2. 自动调用getHealth(): integer，其中包含用于计算运行状况的业务逻辑。0不会在健康进度条上显示任何内容。100将填满进度条。

最后，我注意到每次鼠标移动或单击时，getHealth（）都会被无故调用10-20次。由于Angular的这种变化检测行为，将方法绑定到目标属性可能不是一个好习惯吗？

我在 Angular 中有一个小组件，它有一个方法（目前）设置超时并更改变量的值。

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

@Component({
  selector: 'my-component',
  templateUrl: './my-view.html',
  styleUrls: ['./my-view.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class MyComponent {

  status: boolean = false;

  changeStatus(): void {

    setTimeout(() => {
      this.status = true;
    }, 1500);
  }
}

和 HTML

<div>
  <form #myForm="ngForm">
    <input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="Enter your code" />
  </form>
</div>

<div class="row">
  <div class="col-md-5" (click)="changeStatus()">
    <mat-icon aria-label="clear-all" *ngIf="!status">&#xe042;</mat-icon>
    <a>Change status</a>
  </div>
  <div class="col-md-7">
    <button type="button" class="btn-flat app-btn-flat">Cancel</button>
    <button type="button" class="btn app-btn" …

我不太明白为什么我需要在下面的代码中添加 markForCheck() 以使更改可见。为什么我的@Input() 没有触发变化检测？

我正在将我的项目重构为 OnPush。这两个组件都启用了 OnPush。据我了解，当启用此功能并且 Input() 更改（例如messages）时，更改检测将被触发。

在下面的代码中，我通过graphqlService. 当我收到调用时，我会对传入的数据进行一些解析，然后将其设置为informationMessages属性，该属性cv-messages通过其messages属性绑定到子组件。

结果是该ngOnChanges函数仅在informationMessages属性初始化时被调用一次。但不是当最终解析的数据设置为它时。

如果我添加 markForCheck() 它工作正常。

考虑这个父组件，它有一个这样的模板：

<cv-messages [messages]="informationMessages"></cv-messages>

以及带有这段代码的打字稿文件：

informationMessages: InformationMessageType[] = [];

ngOnInit() {
    this.graphqlService.loadInformationMessages().subscribe(data => {
        const informationMessages: InformationMessageType[] = data;

        .... // parsing stuff

        this.informationMessages = informationMessages;
        // add markForCheck() here
    });
}

消息组件有一个 ngOnChanges 函数，如下所示：

ngOnChanges(changes) {
    console.log(this.constructor.name ' CHANGE:', changes);
}

更新：

您可以在以下答案的评论中找到解决方案。基本上，当异步更改时不会触发更改检测@Input()。所以在这种情况下，我们需要添加一个markForCheck()来强制更改检测。

我已经读过Angular 2变化检测是单向的,从组件树的顶部到底部,并且在单次传递后它变得稳定,这意味着没有多个变化检测周期.鉴于这些假设,在我们有父和子组件具有相互依赖属性的情况下会发生什么？例:

1. 基于用户事件,父组件更新子组件属性
2. 此更新将触发子组件中更新父项属性的事件
3. 父属性更新将触发另一个更新子组件的事件
4. ...

根据我的理解,Angular 1中的类似情况通过设置对这些相互依赖的属性触发的循环次数的限制来解决,这将导致框架抛出错误.

Angular 2如何解决？在上面的例子中,在哪一点上实际触发了变化检测？

我刚用Angular2 RC3尝试了我的第一个应用程序(使用Angular-CLI),我迷失了...

我对变量的"更改检测"有疑问word.我更新了Observable方法中的word变量subscribe,但未检测到任何更改.

app.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { VoiceRecognitionService } from './voice-recognition.service';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `<h1>{{word}}</h1>`, // => No prints any update
  providers: [VoiceRecognitionService],
  styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {

  private voice: VoiceRecognitionService;
  public word: string = '';

  constructor( @Inject(VoiceRecognitionService) voiceRecognition: VoiceRecognitionService) {
    this.voice = voiceRecognition;
  }

  ngOnInit() {
    this.voice.record('ca')
      .subscribe(word => {
        console.log(word); // => Is printing well the new word …