我有一个 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,它是一个工厂函数,我们可以传递组件类型(组件类)来创建组件实例。 此外,组件生命周期挂钩对某些类别的组件功能很有用。