如何将ChangeDetectionStrategy.OnPush设为应用所有组件的默认变更检测策略

嘿，这个问题问得太实用了！在Angular里确实不用每个组件都手动写changeDetection: ChangeDetectionStrategy.OnPush，有两种靠谱的方法能全局统一配置，我给你详细说说：

方法一：自定义Angular CLI原理图，让新组件自动带OnPush #

如果你平时习惯用Angular CLI生成组件，这种方法能让你新建组件时自动带上OnPush配置，一劳永逸：

• 首先创建一个自定义的schematics项目（用来覆盖默认的组件生成模板）：

  ng new my-schematics --create-application=false
  cd my-schematics
  npm install @angular-devkit/schematics-cli --save-dev
  

• 生成一个组件类型的schematics：

  schematics generate schematic component --name=component --type=schematics
  

• 找到生成的模板文件files/__name@dasherize__.component.ts.template，修改组件装饰器部分，加上OnPush配置和对应的导入：

  import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: '<%= selector %>',
    templateUrl: './<%= dasherize(name) %>.component.html',
    styleUrls: ['./<%= dasherize(name) %>.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class <%= classify(name) %>Component implements OnInit {
    constructor() { }
  
    ngOnInit(): void {
    }
  }
  

• 在collection.json里配置这个schematics的基本信息，让CLI能识别：

  {
    "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
    "schematics": {
      "component": {
        "description": "自动启用OnPush策略的自定义组件生成器",
        "factory": "./component/index#component",
        "schema": "./component/schema.json",
        "aliases": ["c"]
      }
    }
  }
  

• 把这个自定义schematics链接到你的Angular项目：

  npm link
  cd ../你的Angular项目路径
  npm link my-schematics
  

• 最后修改项目根目录的angular.json，将默认组件生成器替换为我们自定义的：

  "schematics": {
    "my-schematics:component": {
      "style": "scss" // 这里可以保留你原来的样式配置，比如css/less等
    }
  }
  

之后你用ng g c生成组件时，就会自动带上OnPush配置啦！

方法二：创建全局基类组件，所有组件继承它 #

如果你的项目已经有不少组件，不想折腾schematics，这种继承基类的方式更直接：

• 先创建一个抽象基类组件base.component.ts，在它的装饰器里设置OnPush：

  import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    template: '',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export abstract class BaseComponent { }
  

• 然后让你的所有业务组件都继承这个基类，并且不要在自己的@Component装饰器里重复声明changeDetection（Angular会自动继承基类的配置）：

  import { Component } from '@angular/core';
  import { BaseComponent } from './base.component';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
  })
  export class MyComponentComponent extends BaseComponent { }
  

要是某个组件需要单独用默认的变更检测策略，直接在它的@Component里重新声明changeDetection: ChangeDetectionStrategy.Default就行，会覆盖基类的配置。

小提醒 #

用OnPush策略时要注意它的变更触发规则：只有当输入属性的引用发生变化、组件内部触发事件，或者手动调用ChangeDetectorRef.markForCheck()/detectChanges()时，视图才会更新。如果是老项目全局切换，建议先小范围测试，避免出现视图不更新的问题哦！

内容的提问来源于stack exchange，提问作者mark nebrat