Angular应用页面里_ngcontent属性的生成逻辑

我们打开一个Angular应用，发现其渲染页面里的DOM元素，包含了形如_nghost-, 以及_ngcontent-这种属性。

这些属性在platform-browser.js的DomRenderer2里生成，具体位置在shimContentAttribute和shimHostAttribute函数内：

class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {/*** @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);}

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}`;

更多Jerry的原创文章，尽在：“汪子熙”:

Angular应用页面里_ngcontent属性的生成逻辑相关推荐

Angular应用页面里appId的生成逻辑和位置
DomRendererFactory2类的构造函数里,看到三个输入参数.我们感兴趣的是,appId这个三位随机字符,是如何生成的. 前面这个classRef是DomRendererFactory2的构 ...
Angular.js 页面里的按钮点击事件处理
假设我有一个Angular页面,上面绘制了一个按钮: <div class="fd-form__set"><div class="fd-form__it ...
Angular html 页面里的井号 #
例子: <input #inp (change)="foo = inp.value"> listenes to the change event and calls o ...
xml view里control id的生成逻辑
Created by Jerry Wang, last modified on Aug 19, 2015 XMLTemplateProcessor createId oView createRegul ...
UI5 xml view里control id的生成逻辑
Fiori control id在line 331处生成: node.id包含的是xml view里定义的id,不含任何view前缀: id的naming convention: +"–&q ...
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
简单的Component代码: import { Component } from '@angular/core'; import { FormControl } from '@angular/for ...
在jsp页面里动态生成EL表达式的key
如图,页面中有n个商品列表需要加载,这个列表的名字分别是list1.list2-listn,总之不是写死的. 在Ctroller里面,可见参数名师动态生成的: @RequestMapping(meth ...
在网站插入微博,静态的网页出的来,到服务器出不来,新浪微博生成的微博秀代码，在静态页面能显示小弟我放到自己的.net页面里就显示不了...
新浪微博生成的微博秀代码,在静态页面能显示我放到自己的.net页面里就显示不了上面代码中至的代码是新浪微博秀生成的,我把引用到我的页面里,运行网页始终显示空白,在桌面建一个文本文档把代码拷贝进去,改 ...
xamarin.forms 绑定页面里指定元素的某个属性值
{Binding Source={x:Reference elementName}, Path=BindingContext.propertyname, Mode=OneWay} elementNam ...

Angular应用页面里_ngcontent属性的生成逻辑

Angular应用页面里_ngcontent属性的生成逻辑相关推荐

最新文章

热门文章