Angular应用里input字段后面的

我们打开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的原创文章，请关注公众号"汪子熙":

汪子熙 认证博客专家 前端框架 Node.js SAP JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。