溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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">
<h4>
歡迎來到 {{title}}！
</h4>
<h4>2+2 = {{2 + 2}}</h4>
<h4>調用方法{{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)">點擊按鈕</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">顯示內容</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 屬性關系
少量的 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中模板語法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
