本篇文章给大家详细介绍一下Angular中的模板语法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
相关教程推荐:《angular教程》
插值表达式
- test-interpolation.component.ts
@Component({ selector: 'app-test-interpolation', templateUrl: './test-interpolation.component.html', styleUrls: ['./test-interpolation.component.css'] }) export class TestInterpolationComponent implements OnInit { title = '插值表达式'; constructor() { } ngOnInit() { } getValue(): string { return '值'; } }
- test-interpolation.component.html
<div class="panel panel-primary"> <div class="panel-heading">基插值语法</div> <div class="panel-body"> <h3> 欢迎来到 {{title}}! </h3> <h3>2+2 = {{2 + 2}}</h3> <h3>调用方法{{getValue()}}</h3> </div> </div>
模板变量
- test-template-variables.component.ts
@Component({ selector: 'app-test-template-variables', templateUrl: './test-template-variables.component.html', styleUrls: ['./test-template-variables.component.css'] }) export class TestTempRefVarComponent implements OnInit { constructor() { } ngOnInit() { } public saveValue(value: string): void { console.log(value); } }
- test-template-variables.component.html
<div class="panel panel-primary"> <div class="panel-heading">模板变量</div> <div class="panel-body"> <input #templateInput> <p>{{templateInput.value}}</p> <button class="btn btn-success" (click)="saveValue(templateInput.value)">局部变量</button> </div> </div>
值绑定、事件绑定、双向绑定
值绑定:[]
- test-value-bind.component.ts
@Component({ selector: 'app-test-value-bind', templateUrl: './test-value-bind.component.html', styleUrls: ['./test-value-bind.component.css'] }) export class TestValueBindComponent implements OnInit { public imgSrc = './assets/imgs/1.jpg'; constructor() { } ngOnInit() { } }
- test-value-bind.component.html
<div class="panel panel-primary"> <div class="panel-heading">单向值绑定</div> <div class="panel-body"> <img [src]="imgSrc" /> </div> </div>
事件绑定:()
- test-event-bind-component.ts
@Component({ selector: 'app-test-event-binding', templateUrl: './test-event-binding.component.html', styleUrls: ['./test-event-binding.component.css'] }) export class TestEventBindingComponent implements OnInit { constructor() { } ngOnInit() { } public btnClick(event: any): void { console.log(event + '测试事件绑定!'); } }
- test-event-bind.component.html
fcbd673a522047e992aa60f819a1e8c0 666a865bc6b58bd00bd75fb3013bf55d事件绑定16b28748ea4df4d9c2150843fecfba68 4707d5d5b651f1cbaed9f4528beadc49 bbad6abca5167ac9b50579c805497f98点击按钮65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68
双向绑定:[()]
- test-twoway-binding.component.ts
@Component({ selector: 'app-test-twoway-binding', templateUrl: './test-twoway-binding.component.html', styleUrls: ['./test-twoway-binding.component.css'] }) export class TestTwowayBindingComponent implements OnInit { public fontSizePx = 14; constructor() { } ngOnInit() { } }
- test-twoway-binding.component.html
<div class="panel panel-primary"> <div class="panel-heading">双向绑定</div> <div class="panel-body"> <app-font-resizer [(size)]="fontSizePx"></app-font-resizer> <div [style.font-size.px]="fontSizePx">Resizable Text</div> </div> </div>
- font-resizer.component.ts
@Component({ selector: 'app-font-resizer', templateUrl: './font-resizer.component.html', styleUrls: ['./font-resizer.component.css'] }) export class FontResizerComponent implements OnInit { @Input() size: number | string; @Output() sizeChange = new EventEmitter<number>(); constructor() { } ngOnInit() { } decrement(): void { this.resize(-1); } increment(): void { this.resize(+1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } }
- font-resizer.component.html
<div style="border: 2px solid #333"> <p>这是子组件</p> <button (click)="decrement()" title="smaller">-</button> <button (click)="increment()" title="bigger">+</button> <label [style.font-size.px]="size">FontSize: {{size}}px</label> </div>
内置结构型指令
*ngIf
- test-ng-if.component.ts
@Component({ selector: 'app-test-ng-if', templateUrl: './test-ng-if.component.html', styleUrls: ['./test-ng-if.component.css'] }) export class TestNgIfComponent implements OnInit { isShow = true; constructor() { } ngOnInit() { } }
- test-ng-if.component.html
<div class="panel panel-primary"> <div class="panel-heading">*ngIf的用法</div> <div class="panel-body"> <p *ngIf="isShow" style="background-color:#ff3300">显示内容</p> </div> </div>
*ngFor
- test-ng-for.component.ts
@Component({ selector: 'app-test-ng-for', templateUrl: './test-ng-for.component.html', styleUrls: ['./test-ng-for.component.css'] }) export class TestNgForComponent implements OnInit { races = [ {name: 'star'}, {name: 'kevin'}, {name: 'kent'} ]; constructor() { } ngOnInit() { } }
- test-ng-for.component.html
<div class="panel panel-primary"> <div class="panel-heading">*ngFor用法</div> <div class="panel-body"> <h3>名字列表</h3> <ul> <li *ngFor="let name of names;let i=index;"> {{i}}-{{name.name}} </li> </ul> </div> </div>
ngSwitch
- test-ng-switch.component.ts
@Component({ selector: 'app-test-ng-switch', templateUrl: './test-ng-switch.component.html', styleUrls: ['./test-ng-switch.component.css'] }) export class TestNgSwitchComponent implements OnInit { status = 1; constructor() { } ngOnInit() { } }
- test-ng-switch.component.html
<div class="panel panel-primary"> <div class="panel-heading">ngSwitch用法</div> <div class="panel-body"> <div [ngSwitch]="status"> <p *ngSwitchCase="0">Good</p> <p *ngSwitchCase="1">Bad</p> <p *ngSwitchDefault>Exception</p> </div> </div> </div>
内置属性型指令
HTML 属性与 DOM 属性关系
- 少量的 HTML 属性与 DOM 属性之间有着一对一的映射关系, 如 id;
- 有些 HTML 属性没有对应的 DOM 属性, 如 colspan;
- 有些 DOM 属性没有对应的 HTML 属性, 如 textContent;
- 就算名字相同, HTML 属性和 DOM 属性也不是同一样东西;
- HTML 属性的值指定了初始值, DOM 属性的值表示当前值; HTML 属性的值不可改变, DOM 属性的值可以改变。
- 模板绑定是通过 DOM 属性和事件来工作的, 而不是 HTML 属性。
注意: 插值表达式与属性绑定是同一个东西, 插值表达式属于 DOM 属性绑定。
NgClass
- test-ng-class.component.ts
@Component({ selector: 'app-test-ng-class', templateUrl: './test-ng-class.component.html', styleUrls: ['./test-ng-class.component.scss'] }) export class TestNgClassComponent implements OnInit { public currentClasses: {}; public canSave = true; public isUnchanged = true; public isSpecial = true; constructor() { } ngOnInit() { this.currentClasses = { 'saveable': this.canSave, 'modified': this.isUnchanged, 'special': this.isSpecial }; } }
- test-ng-class.component.html
<div class="panel panel-primary"> <div class="panel-heading">NgClass用法</div> <div class="panel-body"> <div [ngClass]="currentClasses">设置多个样式</div> <div [class.modified]='true'></div> </div> </div>
- test-ng-class.component.less
.saveable { font-size: 18px; } .modified { font-weight: bold; } .special { background-color: #ff3300; }
NgStyle
- test-ng-style.component.ts
@Component({ selector: 'app-test-ng-style', templateUrl: './test-ng-style.component.html', styleUrls: ['./test-ng-style.component.css'] }) export class TestNgStyleComponent implements OnInit { currentStyles: { }; canSave = false; isUnchanged = false; isSpecial = false; constructor() { } ngOnInit() { this.currentStyles = { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '36px' : '12px' }; } }
- test-ng-style.component.html
<div class="panel panel-primary"> <div class="panel-heading">NgStyle用法</div> <div class="panel-body"> <div [ngStyle]="currentStyles"> 用NgStyle批量修改内联样式! </div> <div [style.font-size]="isSpecial? '36px' : '12px'"></div> </div> </div>
NgModel
- test-ng-model.component.ts
@Component({ selector: 'app-test-ng-model', templateUrl: './test-ng-model.component.html', styleUrls: ['./test-ng-model.component.css'] }) export class TestNgModelComponent implements OnInit { name = 'kevin'; constructor() { } ngOnInit() { } }
- test-ng-model.component.html
<div class="panel panel-primary"> <div class="panel-heading">NgModel的用法</div> <div class="panel-body"> <p class="text-danger">ngModel只能用在表单类的元素上面</p> <input type="text" name="name" [(ngModel)]="name"> </div> </div>
小工具
管道
Angular 内置的常用管道:
- uppercase 与 lowercase
uppercase 将字母转换成大写 {{‘aaa’ | uppercase}}
lowercase 将字母转换成小写 {{‘BBB’ | lowercase}}
- Date
{{ birthday | date: ‘yyyy-MM-dd HH:mm:ss’}}
- number
{{ pi | number: ‘2.2-2’}}
2.2-2: 表示是保留 2 位整数和 2 位小数。
2-2: 表示最少 2 位小数,最大 2 位小数。
- 示例
test-pipe.component.ts
@Component({ selector: 'app-test-pipe', templateUrl: './test-pipe.component.html', styleUrls: ['./test-pipe.component.css'] }) export class TestPipeComponent implements OnInit { currentTime: Date = new Date(); str = 'aaa'; money = 34.567; constructor() { } ngOnInit() { window.setInterval( () => { this.currentTime = new Date() } , 1000); } }
test-pipe.component.html
<div class="panel panel-primary"> <div class="panel-heading">管道的用法</div> <div class="panel-body"> {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }} </div> <div class="panel-body"> {{ str | uppercase }} </div> <div class="panel-body"> {{ money | number: '2.2-2' }} </div> </div>
非空断言
- test-not-null-assert.component.ts
@Component({ selector: 'app-test-safe-nav', templateUrl: './test-not-null-assert.component.html', styleUrls: ['./test-not-null-assert.component.css'] }) export class TestSafeNavComponent implements OnInit { public currentValue: any = null; constructor() { } ngOnInit() { } }
- test-not-null-assert.component.html
<div class="panel panel-primary"> <div class="panel-heading">安全取值</div> <div class="panel-body"> 名字:{{currentValue?.name}} </div> </div>
更多编程相关知识,可访问:编程教学!!
以上是详解Angular中的模板语法的详细内容。更多信息请关注PHP中文网其他相关文章!

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),