ng-模板语法
2024-10-08 08:06:43
插值
文本绑定
<p>Message: {{ msg }}</p>
<p [innerHTML]="msg"></p>
属性绑定
<!-- 写法一 -->
<img src="{{ heroImageUrl }}">
<!-- 写法二,推荐 -->
<img [src]="heroImageUrl">
<!-- 写法三 -->
<img bind-src="heroImageUrl">
在布尔特性的情况下,它们的存在即暗示为 true
,属性绑定工作起来略有不同,在这个例子中:
<button [disabled]="isButtonDisabled">Button</button>
如果 isButtonDisabled
的值是 null
、undefined
或 false
,则 disabled
特性甚至不会被包含在渲染出来的 <button>
元素中。
使用 JavaScript 表达式
<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '没完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>
<p [title]="title.split('').reverse().join('')">{{ title }}</p>
<ul>
<li [id]="'list-' + t.id" *ngFor="let t of todos">
{{ t.title }}
</li>
</ul>
编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式,但不是全部。
Angular 遵循轻逻辑的设计思路,所以在模板引擎中不能编写非常复杂的 JavaScript 表达式,这里有一些约定:
- 赋值 (
=
,+=
,-=
, ...) new
运算符- 使用
;
或,
的链式表达式 - 自增或自减操作符 (
++
和--
)
列表渲染
基本用法:
export class AppComponent {
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
也可以获取 index 索引:
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
条件渲染
NgIf
<p *ngIf="heroes.length > 3">There are many heroes!</p>
ngIf
和 <ng-template>
<ng-template [ngIf]="condition"><div>...</div></ng-template>
NgSwitch
NgSwitch 的语法比较啰嗦,使用频率小一些。
<div [ngSwitch]="currentHero.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>
事件处理
事件绑定只需要用圆括号把事件名包起来即可:
<button (click)="onSave()">Save</button>
可以把事件对象传递到事件处理函数中:
<button (click)="onSave($event)">On Save</button>
也可以传递额外的参数(取决于你的业务):
<button (click)="onSave($event, 123)">On Save</button>
当事件处理语句比较简单的时候,我们可以内联事件处理语句:
<button (click)="message = '哈哈哈'">内联事件处理</button>
我们可以利用 属性绑定 + 事件处理 的方式实现表单文本框双向绑定:
<input [value]="message"
(input)="message=$event.target.value" >
事件绑定的另一种写法,使用 on-
前缀的方式:
<!-- 绑定事件处理函数 -->
<button on-click="onSave()">On Save</button>
表单输入绑定
文本
<p>{{ message }}</p>
<input type="text" [(ngModel)]="message">
运行之后你会发现报错了,原因是使用 ngModel
必须导入 FormsModule
并把它添加到 Angular 模块的 imports
列表中。
导入 FormsModule
并让 [(ngModel)]
可用的代码如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+++ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
+++ FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
通过以上的配置之后,你就可以开心的在 Angular 中使用双向数据绑定了
最新文章
- [LeetCode] Shortest Palindrome 最短回文串
- P,NP,NP_hard,NP_complete问题定义
- taglib
- Websocket 概述
- label
- UVA 11806 Cheerleaders (容斥原理)
- angularJs中ui-router的使用
- 提示框的优化之自定义Toast组件之(三)Toast组件优化
- REST架构概述
- linux ubuntu 远程ssh登录
- 从零开始学安全(二十五)●用nmap做端口扫描
- Springboot Session集群处理
- 16.3-uC/OS-III同步 (事件标志组实验)
- SQLI DUMB SERIES-7
- oracle查看表名称和表字段注释
- Windows关闭开机自启项
- linux同步机制2
- css文件放在根目录之后不起作用原因
- winform 程序调用及参数调用
- BZOJ 2521: [Shoi2010]最小生成树
热门文章
- POJ 1789 Truck History (Kruskal最小生成树) 模板题
- DOCKER 学习笔记9 Kubernetes (K8s) 弹性伸缩容器 下
- 实例探究Aspectj,解析SentinelResourceAspect
- python学习(6)选择排序算法简单代码
- Invoking Descriptors - Python 描述符的用法建议
- k8s 开船记-全站登船:Powered by .NET Core on Kubernetes
- Jedis客户端即redis中的pipeline批量操作
- 3.【Spring Cloud Alibaba】声明式HTTP客户端-Feign
- 【HDU - 2859 】Phalanx (dp 最大对称子图)
- SpringBoot图文教程7—SpringBoot拦截器的使用姿势这都有