我们打开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); }
