Angular应用里input字段后面的_ngcontent-hqi是什么含义

我们打开Angular应用，在Chrome开发者工具的Elements面板里可以看到控件被自动加上了形如下图_ngcontent-hqi-c18这种属性，其中hqi为三位的app id，c18为Componentid.

/*** @param {?} eventManager* @param {?} sharedStylesHost* @param {?} component* @param {?} appId*/constructor(eventManager, sharedStylesHost, component, appId) {super(eventManager);this.component = component;/** @type {?} */const styles = flattenStyles(appId + '-' + component.id, component.styles, []);sharedStylesHost.addStyles(styles);this.contentAttr = shimContentAttribute(appId + '-' + component.id);this.hostAttr = shimHostAttribute(appId + '-' + component.id);}

这些属性的字符串拼接在这里完成：

/** @type {?} */
const COMPONENT_REGEX = /%COMP%/g;
/** @type {?} */
const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
/** @type {?} */
const COMPONENT_VARIABLE = '%COMP%';
/** @type {?} */
const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
/** @type {?} */
const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
/*** @param {?} componentShortId* @return {?}*/
function shimContentAttribute(componentShortId) {return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
}
/*** @param {?} componentShortId* @return {?}*/
function shimHostAttribute(componentShortId) {return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
}

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular应用里input字段后面的_ngcontent-hqi是什么含义相关推荐

Linux中awk后面的RS, ORS, FS, OFS 含义
awk之RS.ORS与FS.OFS RS:Record Separator,记录分隔符 ORS:Output Record Separate,输出当前记录分隔符 FS:Field Separator, ...
Linux中awk后面的RS, ORS, FS, OFS 用法
Linux中awk后面的RS, ORS, FS, OFS 含义一.RS 与 ORS 差在哪我们经常会说,awk是基于行列操作文本的,但如何定义"行"呢?这就是RS的作用. ...
es 指定排序字段_ES里多字段分组后排序
ES里多字段分组再排序,只有两种办法,其他办法都不准: 办法一:用script 如 //主桶:设置要聚合的字段,sql TermsBuilder one = AggregationBuilders.t ...
Angular Route数据结构里常用字段使用方法一览
本文介绍Route interface里常用字段的使用方法. https://angular.io/api/router/Route#description path Can be a wild ca ...
Angular应用里的@Input和@Output注解使用方法介绍
这一对注解用于在parent上下文和子指令或者组件之间共享数据.@Input修饰的属性可写,用于数据绑定,而@Output属性可被订阅(Observable). @Input() and @Outpu ...
Try{}里有一个return语句，那么紧跟在这个try后面的finally{}里的code会不会执行，什么时候执行，在return之前还是之后？
Try{}里有一个return语句,那么紧跟在这个try后面的finally{}里的code会执行的. finally 语句总会执行,除非遇到一些特殊情况,如System.exit(0) return ...
Angular应用里的tsconfig.app.json
tsconfig.app.json是tsconfig.json的扩展: 在应用工程文件angular.json里的tsConfig字段处被引用: ng build后的输出: 2020年10月4日国庆节 ...
java map 递归_Java实现递归将嵌套Map里的字段名由驼峰转为下划线
摘要: 使用Java语言递归地将Map里的字段名由驼峰转下划线.通过此例可以学习如何递归地解析任意嵌套的List-Map容器结构. 难度:初级概述### 在进行多语言混合编程时,由于编程规范的不同, ...
日记 [2008年03月23日]LINUX网关后面的pptp ***客户机连接***
给iptables打pptp-conntrack-nat 补丁这里好象没有最新的关于经过iptables 1.3.4 nat 后 pptp client connect *** server 和2 ...

Angular应用里input字段后面的_ngcontent-hqi是什么含义

Angular应用里input字段后面的_ngcontent-hqi是什么含义相关推荐

最新文章

热门文章