我們打開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是什么含义的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。