Question

您可以在此处查看我的Plunk。在这个非常简单的例子中，我传递了一个函数

   _ => {
    console.log(number);
  }

使用@Input属性的子组件。我的父组件看起来像这样：

@Component({
    selector: 'my-app',
    template: `

                <child [func]="getFunction(3)">
                </child>
                <button type="button" (click)="startChangeDetection()">
                  Start change detection
                </button>
    `,
    directives : [Child],
    styles:[`

          .titles {
                    color:#0099FF
             }
            .child-style {
                    background-color:#00ffff
            }
            ` ],
})
export class CarComponent {
    startChangeDetection()
    {

    }
    getFunction(number)
    {
      return _ => {
        console.log(number);
      }
    }
}

该按钮不会触发另一轮更改检测（回调函数中没有实现）。但是，我的更改检测始终将我的输入识别为更改，但从不更改。这是我的孩子组成部分：

@Component({
    selector: 'child',
    template: `
                <h2>Child Component</h2>
             `,
    inputs: ['func']
})
export class Child {

    private func;

    ngOnChanges(changes)
    {
      console.log(changes.func.previousValue.toString());
      console.log(changes.func.currentValue.toString());
    }

}

你可以看到，在ngOnChanges中我将我的功能记录到控制台。但是记录的值（显然）永远不会改变，所以输出总是：

function (_) {
                        console.log(number);
                    }
function (_) {
                        console.log(number);
                    }

为什么Angular甚至会调用ngOnChanges？为什么它认为有任何改变？

Answer 1

每次调用getFunction时，此方法都会返回不同的函数实例。

getFunction(number)
{
  return _ => {
    console.log(number);
  }
}

因为<child [func]="getFunction(3)">，每次运行更改检测时都会调用getFunction。

绑定到函数通常不是最好的主意。如果以这种方式移出函数创建，则每次返回相同的函数实例，并且角度变化检测不会将其识别为更改：

myCallback = _ => this.myCallBack(number) {
  console.log(number);
}

getFunction(number)
{
  return this.myCallback;
}

Answer 2

我在那里看不到任何异常。变更检测被调用两次。

第一次因为子组件在汽车组件内呈现。组件树已更改。
第二次因为函数getFunction在将getFunction(3)作为$sum = 0; foreach($myArray as $key=>$value) { $sum+= $value->Total; } echo $sum;传递给输入时被调用。这相当于输入值的变化，从而触发变化检测周期。

Angular 2：作为@Input-Property的功能

2 个答案: