Angular Component definitions

我有一個 Angular Component，名為 RegisterComponent，其 HTML 實現(xiàn)部分摘錄如下：

<sectionclass="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 代碼，供運行時執(zhí)行：

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 中，它們被實現(xiàn)為組件類的靜態(tài)屬性。 在 Angular 版本 8 中，它們被分配給靜態(tài)屬性 ngComponentDef。 然而，這在 Angular 版本 9 中發(fā)生了變化，而是將組件定義分配給靜態(tài)屬性 ?cmp。 Theta (?) 表示 Angular API 的實驗性（不穩(wěn)定或未完成）部分，而 cmp 只是組件或更確切地說是組件定義的縮寫。

組件定義具有 ComponentDef<T> 的形狀，它是一種數(shù)據(jù)結構，具有許多 Ivy 運行時使用的元數(shù)據(jù)屬性。 組件定義中元數(shù)據(jù)屬性的示例包括有關視圖封裝模式的元數(shù)據(jù)、組件是否使用 OnPush 更改檢測策略、組件視圖可用的指令定義、組件選擇器和生命周期掛鉤。

對我們而言，最有趣的元數(shù)據(jù)屬性當然是 features 屬性，它要么是 null 要么是一個組件特征數(shù)組。

對于創(chuàng)建組件特性最有用的元數(shù)據(jù)屬性是 factory，它是一個工廠函數(shù)，我們可以傳遞組件類型（組件類）來創(chuàng)建組件實例。 此外，組件生命周期掛鉤對某些類別的組件功能很有用。

總結

以上是生活随笔為你收集整理的TypeScript 编译生成的 JavaScript 源代码里的 ɵcmp 属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。