angular2 @input - 更改检测[重复]

typescript

使用Angular2的@Input装饰器，可以轻松地在组件之间传递数据。@Input装饰器允许父组件将数据传递给子组件，并且当父组件的数据发生更改时，子组件也能够自动更新。这个功能是通过Angular的变更检测机制来实现的。

在Angular中，默认情况下，变更检测是通过比较对象的引用来进行的。当一个输入属性的引用发生更改时，Angular会检测到这个变化，并触发相应的变更检测过程。然而，有时候我们希望能够自定义变更检测的逻辑，以避免不必要的性能损耗。

为了实现自定义的变更检测逻辑，我们可以使用Angular2中的ChangeDetectionStrategy和ChangeDetectorRef。ChangeDetectionStrategy定义了变更检测的策略，而ChangeDetectorRef则是用来手动触发变更检测的工具。

## 为什么需要自定义变更检测逻辑？

在某些情况下，我们可能希望避免不必要的变更检测。例如，当一个输入属性是一个复杂的对象，但实际上只有其中的几个属性发生了更改时，我们不希望整个对象都被认为是发生了变化。这种情况下，使用默认的变更检测机制可能会导致性能下降。

另一个例子是当一个输入属性是一个数组时。默认情况下，当数组中的任何一个元素发生变化时，整个数组都会被认为是发生了变化。然而，有时候我们只关心数组的长度是否发生了变化，而不关心具体的元素变化。

## 如何实现自定义变更检测逻辑？

要实现自定义的变更检测逻辑，我们首先需要在组件中定义一个输入属性，并使用@Input装饰器进行标记。然后，我们可以使用ChangeDetectionStrategy.OnPush来指定自定义变更检测的策略。

接下来，我们需要在组件中注入ChangeDetectorRef，并使用它的markForCheck方法来手动触发变更检测。在自定义的变更检测逻辑中，我们可以根据自己的需求来判断何时调用markForCheck方法。

下面是一个简单的示例代码，演示了如何使用自定义变更检测逻辑：

typescript
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <div>
      <h2>{{ title }}</h2>
      
{{ content }}
    </div>
  </code>,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() title: string;
  @Input() content: string;
  constructor(private cdr: ChangeDetectorRef) { }
  updateContent(newContent: string) {
    this.content = newContent;
    this.cdr.markForCheck();
  }
}
@Component({
  selector: 'app-parent',
  template: <code>
    <div>
      <app-child [title]="childTitle" [content]="childContent"></app-child>
      <button (click)="updateChildContent()">Update Child Content</button>
    </div>
  </code>
})
export class ParentComponent {
  childTitle = 'Child Title';
  childContent = 'Child Content';
  updateChildContent() {
    this.childContent = 'New Child Content';
  }
}

在上面的示例代码中，ChildComponent是一个子组件，ParentComponent是一个父组件。子组件中使用了自定义的变更检测策略ChangeDetectionStrategy.OnPush，并在updateContent方法中调用了markForCheck方法。

父组件中通过按钮的点击事件来更新子组件的内容。当父组件调用updateChildContent方法时，子组件的内容会发生变化，并且通过调用markForCheck方法来触发变更检测。

使用Angular2的@Input装饰器和自定义的变更检测逻辑，我们可以更好地控制组件之间的数据传递和变更检测。通过合理地使用自定义变更检测策略和ChangeDetectorRef，我们可以提升应用的性能并减少不必要的变更检测。