Angular应用从Component到Html的数据绑定是如何实现的
时间:2022-07-26
本文章向大家介绍Angular应用从Component到Html的数据绑定是如何实现的,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
index.html里有个base标签页,href属性为/:
getBaseElementHref:
getBaseHref:
relativePath里有个document.createElement(‘a’)动态创建的场景:
Component html:
<input [value]= "userInput"/>
Component的userInput属性:
运行时,Component属性userInput的值是如何流到HTML页面上去的?
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further changes are detected. If additional changes are picked up during this second cycle,
* bindings in the app have side-effects that cannot be resolved in a single change detection
* pass.
* In this case, Angular throws an error, since an Angular application can only have one change
* detection pass during which all change detection must complete.
* @return {?}
*/
tick() {
if (this._runningTick) {
throw new Error('ApplicationRef.tick is called recursively');
}
try {
this._runningTick = true;
for (let view of this._views) {
view.detectChanges();
}
if (this._enforceNoNewChanges) {
for (let view of this._views) {
view.checkNoChanges();
}
}
}
catch (e) {
// Attention: Don't rethrow as it could cancel subscriptions to Observables!
this._zone.runOutsideAngular((/**
* @return {?}
*/
() => this._exceptionHandler.handleError(e)));
}
finally {
this._runningTick = false;
}
}
function tickRootContext(rootContext) {
for (let i = 0; i < rootContext.components.length; i++) {
/** @type {?} */
const rootComponent = rootContext.components[i];
/** @type {?} */
const lView = (/** @type {?} */ (readPatchedLView(rootComponent)));
/** @type {?} */
const tView = lView[TVIEW];
renderComponentOrTemplate(tView, lView, tView.template, rootComponent);
}
}
在core.js的rootContext属性里,展开Components, 能看到所有AppComponent的属性和值:
渲染UI:
下面这是一个非常重要的从Component属性将值移动到UI上的方法:
/**
* @fileoverview added by tsickle
* Generated from: packages/core/src/render3/instructions/property.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Update a property on a selected element.
*
* Operates on the element selected by index via the {@link select} instruction.
*
* If the property name also exists as an input property on one of the element's directives,
* the component property will be set instead of the element property. This check must
* be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled
*
* @codeGenApi
* @template T
* @param {?} propName Name of property. Because it is going to DOM, this is not subject to
* renaming as part of minification.
* @param {?} value New value to write.
* @param {?=} sanitizer An optional function used to sanitize the value.
* @return {?} This function returns itself so that it may be chained
* (e.g. `property('name', ctx.name)('title', ctx.title)`)
*
*/
function ɵɵproperty(propName, value, sanitizer) {
/** @type {?} */
const lView = getLView();
/** @type {?} */
const bindingIndex = nextBindingIndex();
if (bindingUpdated(lView, bindingIndex, value)) {
/** @type {?} */
const tView = getTView();
/** @type {?} */
const tNode = getSelectedTNode();
elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);
ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
}
return ɵɵproperty;
}
renderer.setProperty:
在这里给input的value属性赋的值:
- .Net 转战 Android 4.4 日常笔记(5)--新软件Android Studio 0.5.8安装与配置及问题解决
- 第2章 对象激活上下文-对象激活
- .Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化
- .Net 转战 Android 4.4 日常笔记(3)--目录结构分析
- .Net 转战 Android 4.4 日常笔记(2)--HelloWorld入门程序
- 读书笔记(二)对象激活和上下文
- 程序员的噩梦有哪些?除了改需求,还有这些…
- UC Berkeley提出新型分布式执行框架Ray:有望取代Spark
- 卡奇话爬虫使用方法以及下载地址
- flash读取XML 背景自动适应大小
- 记录一个发邮件的cs文件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
- xml-rpc(2)-first demo_v2
- xml-rpc(1)-first demo
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker简介与安装
- python绘图 | 国家气象局开源预报检验库(多图预警)
- Docker镜像与容器的常用操作
- DiDi Kafka-Manager安装和简单使用
- Docker数据管理与挂载管理
- Docker Dockerfile 指令详解与实战案例
- flume kafka和sparkstreaming整合
- Docker如何搭建私有registry镜像仓库
- Harbor介绍与企业级私有Docker镜像仓库搭建
- 如何查看docker run启动参数命令
- YAML 语言教程与使用案例
- 计算等压面要素场的基本检验指标
- Kubernetes K8S之SSL证书有效期修改
- Kubernetes K8S之通过yaml文件创建Pod与Pod常用字段详解
- Kubernetes K8S之kubectl命令详解及常用示例