本篇文章給大家詳細介紹一下Angular中的範本語法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
相關教學推薦:《angular教學》
@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 '值'; } }
<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>
@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); } }
<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>
@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() { } }
<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 + '测试事件绑定!'); } }
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() { } }
<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>
@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); } }
<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>
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() { } }
<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>
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() { } }
<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>
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() { } }
<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 屬性之間有著一對一的對應關係, 如id;
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 }; } }
<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>
.saveable { font-size: 18px; } .modified { font-weight: bold; } .special { background-color: #ff3300; }
#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' }; } }
<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>
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() { } }
<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
lowercase 將字母轉換成小寫{{'BBB' | lowercase}}
#Date
number
2.2-2: 表示是保留2 位元整數和2 位小數。2-2: 表示最少 2 位小數,最大 2 位小數。
範例
@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() { } }
<div class="panel panel-primary"> <div class="panel-heading">安全取值</div> <div class="panel-body"> 名字:{{currentValue?.name}} </div> </div>
以上是詳解Angular中的模板文法的詳細內容。更多資訊請關注PHP中文網其他相關文章!