购物车
登陆 / 注册
微信扫码登陆

推荐手册

Angular 4 模板语法

Angular 4 模板语法
编辑:清浅 清浅 更新时间:2019-03-19 11:01:01

模板语法

插值表达式

<div>Hello {{name}}</div>

等价于

<div [textContent]="interpolate(['Hello'], [name])"></div>

模板表达式

属性绑定

输入属性的值为常量

<show-title title="Some Title"></show-title>

等价于

<show-title [title]="'Some Title'"></show-title>

输入属性的值为实例属性

<show-title [title]="title"></show-title>

等价于

<show-title bind-title="title"></show-title>

事件绑定

<date-picker (dateChanged)="statement()"></date-picker>

等价于

<date-picker on-dateChanged="statement()"></date-picker>

模板引用变量

<video-player #player></video-player> 
<button (click)="player.pause()">Pause</button>

等价于

<video-player ref-player></video-player>

双向绑定

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">

等价于

<input [(ngModel)]="todo.text">

* 与 &lt;template&gt;

*ngIf

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

最终转换为

<template [ngIf]="currentHero">  
<hero-detail [hero]="currentHero"></hero-detail></template>

*ngFor

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes"   
 [hero]="hero"></hero-detail>

最终转换为

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes"> 
<hero-detail [hero]="hero"></hero-detail></template>


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号