您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Angular中模板語法有哪些的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
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 = '插值表達(dá)式'; constructor() { } ngOnInit() { } getValue(): string { return '值'; } }
test-interpolation.component.html
<div class="panel panel-primary"> <div class="panel-heading">基插值語法</div> <div class="panel-body"> <h4> 歡迎來到 {{title}}! </h4> <h4>2+2 = {{2 + 2}}</h4> <h4>調(diào)用方法{{getValue()}}</h4> </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
<div class="panel panel-primary"> <div class="panel-heading">事件綁定</div> <div class="panel-body"> <button class="btn btn-success" (click)="btnClick($event)">點(diǎn)擊按鈕</button> </div> </div>
雙向綁定:[()]
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">顯示內(nèi)容</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"> <h4>名字列表</h4> <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 屬性關(guān)系
少量的 HTML 屬性與 DOM 屬性之間有著一對(duì)一的映射關(guān)系, 如 id;
有些 HTML 屬性沒有對(duì)應(yīng)的 DOM 屬性, 如 colspan;
有些 DOM 屬性沒有對(duì)應(yīng)的 HTML 屬性, 如 textContent;
就算名字相同, HTML 屬性和 DOM 屬性也不是同一樣?xùn)|西;
HTML 屬性的值指定了初始值, DOM 屬性的值表示當(dāng)前值; HTML 屬性的值不可改變, DOM 屬性的值可以改變。
模板綁定是通過 DOM 屬性和事件來工作的, 而不是 HTML 屬性。
注意: 插值表達(dá)式與屬性綁定是同一個(gè)東西, 插值表達(dá)式屬于 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">設(shè)置多個(gè)樣式</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批量修改內(nèi)聯(lián)樣式! </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 內(nèi)置的常用管道:
uppercase 與 lowercase
uppercase 將字母轉(zhuǎn)換成大寫 {{‘a(chǎn)aa’ | uppercase}}
lowercase 將字母轉(zhuǎn)換成小寫 {{‘BBB’ | lowercase}}
Date
{{ birthday | date: ‘yyyy-MM-dd HH:mm:ss’}}
number
{{ pi | number: ‘2.2-2’}}
2.2-2: 表示是保留 2 位整數(shù)和 2 位小數(shù)。
2-2: 表示最少 2 位小數(shù),最大 2 位小數(shù)。
示例
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>
感謝各位的閱讀!關(guān)于“Angular中模板語法有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。