TypeScript 编译生成的 JavaScript 源代码里的 ɵcmp 属性-阿里云开发者社区

开发者社区> 努力滴码农> 正文

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

简介: 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

       });

image.png

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


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


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


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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Netbeans源代码编辑技巧——使用代码补全和代码生成
原文 Netbeans源代码编辑技巧——使用代码补全和代码生成 使用代码补全生成代码 一般来说,代码补全对于自动填充缺失的代码是有帮助的,例如标识符和关键字。截至 NetBeans IDE 6.0,您现在甚至可以用代码补全来生成整个方法。
882 0
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录(二)
DL之RNN:人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练&测试过程全记录
29 0
FreeMarker之根据模板生成Java代码
FreeMarker根据模板生成Java代码,光这句话,大家想必也知道它的应用了,比如流行的DRY原则,该原则的意思,可简单概述为"不要写重复的代码"。 比如Java中三层架构,数据访问层,业务逻辑层,表现层,光这三层就出现重复性的增删改查及其相关的界面代码。
2063 0
Android 开发中的代码片段(2)复制对象之间的属性值
前言 开发中会遇到这样的一个情况,我们得到一个dto对象,里面有几十个属性值,需要将这几十个属性值的N个通过VO传输另外一个地方,一般我们的做法是: 创建VO类,new vo() 对象,通过vo.set(dto.get)的方式不断的设置值。
862 0
JavaScript轻应用:UI组件的属性配置
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
88 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载