Angular应用里input字段后面的_ngcontent-hqi是什么含义
2023-09-14 09:04:03 时间
我们打开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的原创文章,请关注公众号"汪子熙":
相关文章
- 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例
- [Angular] N things you might don't know about Angular Route
- [Angular] Update FormArray with patchValue
- [Angular 2] Writing a Simple Angular 2 Component
- [Angular] Angular Search filter, built-in filters, ng-repeat
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular 2] Use Service use Typescript
- 想调试Angular框架的@HostBinding,应该在哪里设置断点
- Angular应用一个创建场景的问题分析
- 关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
- 关于 Angular PWA 应用中的 ngsw.json 文件
- Angular 服务器端渲染应用一个常见的内存泄漏问题
- 查看 SAP Spartacus 基于 Angular 的版本号
- 一个关于Angular Directive selector里的中括号使用问题
- Angular单元测试遇到的错误消息:Uncaught Error - Cannot find module tslib
- Angular应用里的tsconfig.app.json
- Angular应用初始化APP_INITIALIZER
- 在Angular应用里使用Redux
- Angular应用里具有back功能的按钮实现
- Angular应用内路由(In App Route)的最佳实践
- Angular应用的入口