Angular中的条件更改检测策略？答案

【问题标题】：Conditional chagngeDetectionStrategy in Angular?Angular中的条件更改检测策略？
【发布时间】：2018-08-05 08:04:45
【问题描述】：

我在 Angular 中有一个卡片组件：

请注意评分星，这也是一个组件。

但是，在这种特殊情况下，用户不能点击星星，因为它是只读信息。

（在其他组件中使用相同的星级评分组件来实际设置评分）

这是 Stars 组件的声明：

@Component({
    moduleId   : module.id,
    selector   : 'app-stars-rating',
    templateUrl: './stars.component.html',
    styleUrls  : ['./stars.component.scss'],
    providers  : [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

问题：

看看这个：

 <Card col="1" row="2">
        <app-stars-rating [disabled]="true" [isSmall]="true">
        </app-stars-rating>
 </Card >

是否可以有条件地在app-stars-rating 组件上设置changeDetection: ChangeDetectionStrategy.OnPush？

换句话说：

<Card col="1" row="2">
        <app-stars-rating [isOnPush]="someVal" ...>
        </app-stars-rating>
 </Card >

【问题讨论】：

当你让它总是作为 onpush 时有什么问题？应该没问题
我不这么认为，但您可以将ChangeDetectorRef 注入您的组件并有条件地使用它。参考：angular.io/api/core/ChangeDetectorRef。如果你能描述一下你真正想要完成的事情会很有用？
@deezg 性能改进。我知道这不是那么多，但它是一些东西
我明白了。我认为没有@Input 的onPush 会很好。如果您考虑一下，onPush 是您最好和最高效的选择。它不能低于这个值。所以让onPush 带有额外的逻辑（或@Inputs）来启用编辑听起来是一个好方法。即使您将视图/编辑拆分为 2 个单独的组件，您的视图之一仍将至少具有 onPush。

标签： javascript angular

【解决方案1】：

最接近有条件设置OnPush 更改检测 的方法是detach 禁用编辑时更改检测树 中的视图。

public class StarsComponent {
  @Input() public disabled: boolean;

  constructor(private cdRef: ChangeDetectorRef) {}

  public ngOnInit(): void {
     // Init
     if (this.disabled) {
       this.cdRef.detach();
     }
  }

  public refreshManual(): void {
     this.cdRef.detectChanges();     
  }
}

在您显式调用detectChanges() 方法之前，它将阻止更改检测在您的组件上运行。如果组件随后需要再次启用更改检测，您可以通过调用reattach() 方法来添加它。

【讨论】：