Angular里的property binding的一个例子

如果src不加中括号，hero.url会被当成静态的字符串，传递给src属性：

当然最后啥图片也不会显示出来：

正确的办法：实现一个get函数，返回正确的图片url：

Component模板源代码：

<img [src]="myUrl"/>

模板函数被解析并执行：

elementPropertyInternal

renderer.setProperty, 设置img DOM节点的src属性，为get函数返回的图片url：

最后直接给DOM节点的src属性赋值，这是HTML原生操作：

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

Angular里的property binding的一个例子相关推荐

Angular里的style property binding的一个例子
Component模板的源代码: <div [style.color] = "color">Hello</div> color get函数的实现: 这一行执 ...
Angular里的structural directive的一个例子
在product-list.component.html里,编写如下代码: <h2>Jerry Products</h2><div *ngFor="let pr ...
SAP Spartacus 中，Angular ＜ng-container＞使用的一个例子
Angular官网里对ng-container的介绍: The Angular is a grouping element that doesn't interfere with styles or ...
Angular里ngModel双向绑定的一个使用例子
源代码: @Component({selector: "app-root",template: `<input [(ngModel)] = "jerry" ...
Angular 下拉菜单实现的一个例子
我在开发一个测试工具,用户可以手动从一个下拉菜单里,选择当前浏览器的 user agent 字段. 其中 My Browser 是当前浏览器真实的值,其他4个都是代码里硬编码的 fake user a ...
Angular component的一个例子
官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...
Angular 原理图 Schematics 学习 - 动手开发一个实际的例子
当 ng add 命令向项目中添加某个库时,就会运行原理图.ng generate 命令则会运行原理图,来创建应用.库和 Angular 代码块. 一些术语: 规则在原理图中,是指一个在文件树上运 ...
Webpack入门——使用Webpack打包Angular项目的一个例子
(一)什么是Webpack Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下 ...
Angular里的RouterOutlet指令学习笔记
官网:https://angular.io/api/router/RouterOutlet#description Acts as a placeholder that Angular dynamic ...

Angular里的property binding的一个例子

Angular里的property binding的一个例子相关推荐

最新文章

热门文章