相关疑难解决方法(0)

在使用Observables的同时,我正试图围绕最佳实践ChangeDetectionStrategy.OnPush.

该示例演示了想要显示某种加载消息(或者可能是简单的微调器动画)的常见场景:

Plnkr在这里

@Component({
  selector: 'my-app',
  template: `Are we loading?: {{loadingMessage}}`,

  // Obviously "Default" will notice the change in `loadingMessage`...
  // changeDetection: ChangeDetectionStrategy.Default

  // But what is best practice when using OnPush?
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {

  private loadingMessage = "Wait for it...";

  constructor() {

  }

  ngOnInit() {

    // Pretend we're loading data from a service.
    // This component is only interested in the call's success
    Observable.of(true)
      .delay(2000)
      .subscribe(success => {

        if(success){
          console.log('Pretend loading: …

我试图让familliar与角2的ChangeDetectionStrategy.OnPush性能提升(如解释在这里).但我这里有古玩的案例.

我有父母AppComponent:

@Component({
  selector: 'my-app',
  template: `<h1>
  <app-literals [title]="title" [dTitle]="dTitle"></app-literals>
  <input [value]="title.name"/>
</h1>
`
})
export class AppComponent implements OnInit {
  title = { name: 'original' };
  dTitle = { name: "original" };

  constructor(private changeDetectorRef : ChangeDetectorRef) {

  }

    ngOnInit(): void {
      setTimeout(() => {
        alert("About to change");
        this.title.name = "changed";
        this.dTitle = { name: "changed" };
      }, 1000);
    }

}

和子LiteralsComponent组件:

@Component({
  selector: 'app-literals',
  template: `  {{title.name}}
  {{dTitle.name}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
}) …

我不明白为什么子组件的更改检测在这种情况下运行：

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

@Component({
  selector: 'app-root',
  template: `
    <cmp [ticks]="ticks" (update)="onUpdate($event)"></cmp>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  ticks = 0;

  onUpdate(event) {
    console.log(this.ticks);
  }
}


import { Component, ChangeDetectionStrategy, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Number of ticks: {{ticks}}</p>
`
})
export class CmpComponent implements OnInit, OnChanges {
  @Input('ticks') ticks: number;
  @Output() update: EventEmitter<number> = new EventEmitter();

  ngOnInit() {
    setInterval(() => {
      this.ticks++;
      this.update.emit(this.ticks);
    }, …

我正在阅读有关 Zone.JS 和 Angular 更改检测过程的信息，在代码源中，Zone.JS 通过将检查传播到所有组件来通知 Angular 有关更改并在第一个组件中从上到下运行验证，但在我的测试，我有奇怪的行为。

检查我的样本：

http://plnkr.co/edit/QPHBQ7cYg9JFZr2oVnGZ?p=preview

该示例具有以下架构：

<app-component>
    <child-component>
        <grand-child-component>

它们相互嵌套，都没有 @Input 属性，而且都是 OnPush，它们在视图中显示一个简单的值，如：

看法：

{{getComponentValue}}

打字稿

value = "app component";

get getComponentValue() { // <-- ES6 get to log when Angular check
    console.log('change detection checking here in component app-component')
    return this.value;
}

您可以在示例中检查此代码。

当应用程序启动时，我们可以看到日志：

check component app
check component child
check component grand child

很酷，但是，现在让我们创建一个场景，如果孙子触发 DOM 事件？

改变孙子的观点

<button (click)="undefined"> {{getComponentValue}} </button>  
<!-- (click)="undefined" trigger an event -->

然后我们有日志：

check component app
check component child …