TypeScript 编译生成的 JavaScript 源代码里的 ɵcmp 属性

Angular Component definitions

我有一个 Angular Component，名为 RegisterComponent，其 HTML 实现部分摘录如下：

<section
  class="cx-page-section container"
  *ngIf="!(isLoading$ | async); else loading"
>
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="cx-section">
        <form (ngSubmit)="submitForm()" [formGroup]="registerForm">

编译后生成的 JavaScript 代码，供运行时执行：

RegisterComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineComponent"]({
            type: RegisterComponent,
            selectors: [["cx-register"]],
            decls: 4,
            vars: 4,
            consts: [["class", "cx-page-section container", 4, "ngIf", "ngIfElse"], ["loading", ""], [1, "cx-page-section", "container"], [1, "row", "justify-content-center"], [1, "col-md-6"], [1, "cx-section"], [3, "formGroup", "ngSubmit"], [1, "form-group"], [1, "label-content"], ["formControlName", "titleCode", 1, "form-control"], ["selected", "", "value", "", "disabled", ""], [3, "value", 4, "ngFor", "ngForOf"], ["type", "text", "name", "firstname", "formControlName", "firstName", 1, "form-control", 3, "placeholder"], [3, "control"], ["type", "text", "name", "lastname", "formControlName", "lastName", 1, "form-control", 3, "placeholder"], ["type", "email", "name", "email", "formControlName", "email", 1, "form-control", 3, "placeholder"], ["type", "password", "name", "password", "formControlName", "password", 1, "form-control", 3, "placeholder"], ["type", "password", "name", "confirmpassword", "formControlName", "passwordconf", 1, "form-control", 3, "placeholder"], [1, "form-check"], [4, "ngIf"], ["type", "checkbox", "name", "termsandconditions", "formControlName", "termsandconditions"], [1, "form-check-label"], ["target", "_blank", 3, "routerLink"], ["type", "submit", 1, "btn", "btn-block", "btn-primary"], [1, "cx-login-link", "btn-link", 3, "routerLink"], [3, "value"], ["type", "checkbox", "name", "newsletter", "formControlName", "newsletter", 1, "form-check-input", 3, "checked"], [1, "cx-spinner"]],
            template: function RegisterComponent_Template(rf, ctx) {
                if (rf & 1) {
                    _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵtemplate"](0, RegisterComponent_section_0_Template, 79, 69, "section", 0);
                    _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵpipe"](1, "async");
                    _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵtemplate"](2, RegisterComponent_ng_template_2_Template, 2, 0, "ng-template", null, 1, _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵtemplateRefExtractor"]);
                }
                if (rf & 2) {
                    const _r1 = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵreference"](3);
                    _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵproperty"]("ngIf", !_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵpipeBind1"](1, 2, ctx.isLoading$))("ngIfElse", _r1);
                }
            },
            directives: [_angular_common__WEBPACK_IMPORTED_MODULE_0__["NgIf"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["ɵangular_packages_forms_forms_y"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["NgControlStatusGroup"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["FormGroupDirective"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["SelectControlValueAccessor"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["NgControlStatus"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["FormControlName"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["NgSelectOption"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["ɵangular_packages_forms_forms_x"], _angular_common__WEBPACK_IMPORTED_MODULE_0__["NgForOf"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["DefaultValueAccessor"], _spartacus_storefront__WEBPACK_IMPORTED_MODULE_4__["FormErrorsComponent"], _angular_forms__WEBPACK_IMPORTED_MODULE_8__["CheckboxControlValueAccessor"], _angular_router__WEBPACK_IMPORTED_MODULE_2__["RouterLinkWithHref"], _spartacus_storefront__WEBPACK_IMPORTED_MODULE_4__["SpinnerComponent"]],
            pipes: [_angular_common__WEBPACK_IMPORTED_MODULE_0__["AsyncPipe"], _spartacus_core__WEBPACK_IMPORTED_MODULE_3__["TranslatePipe"], _spartacus_core__WEBPACK_IMPORTED_MODULE_3__["UrlPipe"]],
            encapsulation: 2
        });

组件定义是运行时可用的 Angular 组件注释。 在 Ivy 中，它们被实现为组件类的静态属性。 在 Angular 版本 8 中，它们被分配给静态属性 ngComponentDef。 然而，这在 Angular 版本 9 中发生了变化，而是将组件定义分配给静态属性 ɵcmp。 Theta (ɵ) 表示 Angular API 的实验性（不稳定或未完成）部分，而 cmp 只是组件或更确切地说是组件定义的缩写。

组件定义具有 ComponentDef<T> 的形状，它是一种数据结构，具有许多 Ivy 运行时使用的元数据属性。 组件定义中元数据属性的示例包括有关视图封装模式的元数据、组件是否使用 OnPush 更改检测策略、组件视图可用的指令定义、组件选择器和生命周期挂钩。

对我们而言，最有趣的元数据属性当然是 features 属性，它要么是 null 要么是一个组件特征数组。

对于创建组件特性最有用的元数据属性是 factory，它是一个工厂函数，我们可以传递组件类型（组件类）来创建组件实例。 此外，组件生命周期挂钩对某些类别的组件功能很有用。