TypeScript 編譯生成的 JavaScript 源代碼裡的 ɵcmp 屬性

Angular Component definitions

我有一個

Angular

Component，名為 RegisterComponent，其 HTML 實作部分摘錄如下：

 class="cx-page-section container"

 *ngIf="!(isLoading$ | async); else loading"

>

編譯後生成的 

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 的形狀，它是一種資料結構，具有許多 Ivy 運作時使用的中繼資料屬性。 元件定義中中繼資料屬性的示例包括有關視圖封裝模式的中繼資料、元件是否使用 OnPush 更改檢測政策、元件視圖可用的指令定義、元件選擇器和生命周期挂鈎。

對我們而言，最有趣的中繼資料屬性當然是 features 屬性，它要麼是 null 要麼是一個元件特征數組。

對于建立元件特性最有用的中繼資料屬性是 factory，它是一個工廠函數，我們可以傳遞元件類型（元件類）來建立元件執行個體。 此外，元件生命周期挂鈎對某些類别的元件功能很有用。