用12个例子全面示范Angular的模板语法
2024-09-27 15:49:22
template分支，用12个例子全面示范Angular的模板语法
// 使用方法
git clone https://git.oschina.net/mumu-osc/learn-component.git
cd learn-component
git pull origin template
npm install
ng serve
1.基本插值语法
// test-interpolation.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-interpolation',
templateUrl: './test-interpolation.component.html',
styleUrls: ['./test-interpolation.component.css']
})
export class TestInterpolationComponent implements OnInit {
public title = '假的星际争霸2';
constructor() { }
ngOnInit() {
}
public getVal():any{
return 65535;
}
}
<!-- test-interpolation.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">基本插值语法</div>
<div class="panel-body">
<h3>
欢迎来到{{title}}！
</h3>
<h3>1+1={{1+1}}</h3>
<h3>可以调用方法{{getVal()}}</h3>
</div>
</div>
2.模板内的局部变量
// test-temp-ref-var.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-temp-ref-var',
templateUrl: './test-temp-ref-var.component.html',
styleUrls: ['./test-temp-ref-var.component.css']
})
export class TestTempRefVarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
public sayHello(name:string):void{
alert(name);
}
}
<!-- test-temp-ref-var.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">模板内的局部变量</div>
<div class="panel-body">
<input #heroInput>
<p>{{heroInput.value}}</p>
<button class="btn btn-success" (click)="sayHello(heroInput.value)">局部变量</button>
</div>
</div>
3.单向值绑定
// test-value-bind.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-value-bind',
templateUrl: './test-value-bind.component.html',
styleUrls: ['./test-value-bind.component.css']
})
export class TestValueBindComponent implements OnInit {
public imgSrc:string="./assets/imgs/1.jpg";
constructor() { }
ngOnInit() {
}
public changeSrc():void{
if(Math.ceil(Math.random()*1000000000)%2){
this.imgSrc="./assets/imgs/2.jpg";
}else{
this.imgSrc="./assets/imgs/1.jpg";
}
}
}
<!-- test-value-bind.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">单向值绑定</div>
<div class="panel-body">
<img [src]="imgSrc" />
<button class="btn btn-success" (click)="changeSrc()">修改图片src</button>
</div>
</div>
4.事件绑定
import { Component, OnInit } from '@angular/core';
@Component({
selector: '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):void{
alert("测试事件绑定！");
}
}
<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>
5.双向绑定
// test-twoway-binding.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-twoway-binding',
templateUrl: './test-twoway-binding.component.html',
styleUrls: ['./test-twoway-binding.component.css']
})
export class TestTwowayBindingComponent implements OnInit {
public fontSizePx:number=14;
constructor() { }
ngOnInit() {
}
}
<!-- test-twoway-binding.component.html -->
<div class="panel panel-primary">
<div class="panel-heading">双向绑定</div>
<div class="panel-body">
<font-resizer [(size)]="fontSizePx"></font-resizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
</div>
</div>
// font-resizer.component.ts
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: '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() {
}
dec() { this.resize(-1); }
inc() { 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)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
6.*ngIf的用法
// test-ng-if.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-ng-if',
templateUrl: './test-ng-if.component.html',
styleUrls: ['./test-ng-if.component.css']
})
export class TestNgIfComponent implements OnInit {
public isShow:boolean=true;
constructor() { }
ngOnInit() {
}
public toggleShow():void{
this.isShow=!this.isShow;
}
}
<div class="panel panel-primary">
<div class="panel-heading">*ngIf的用法</div>
<div class="panel-body">
<p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示？</p>
<button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button>
</div>
</div>
7.*ngFor用法
// test-ng-for.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-ng-for',
templateUrl: './test-ng-for.component.html',
styleUrls: ['./test-ng-for.component.css']
})
export class TestNgForComponent implements OnInit {
public races:Array<any>=[
{name:"人族"},
{name:"虫族"},
{name:"神族"}
];
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 race of races;let i=index;">
{{i+1}}-{{race.name}}
</li>
</ul>
</div>
</div>
8.NgClass用法
// test-ng-class.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-ng-class',
templateUrl: './test-ng-class.component.html',
styleUrls: ['./test-ng-class.component.scss']
})
export class TestNgClassComponent implements OnInit {
public currentClasses: {};
public canSave: boolean = true;
public isUnchanged: boolean = true;
public isSpecial: boolean = true;
constructor() { }
ngOnInit() {
}
setCurrentClasses() {
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>
<button class="btn btn-success" (click)="setCurrentClasses()">设置</button>
</div>
</div>
9.NgStyle用法
// test-ng-style.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-ng-style',
templateUrl: './test-ng-style.component.html',
styleUrls: ['./test-ng-style.component.css']
})
export class TestNgStyleComponent implements OnInit {
public currentStyles: {}
public canSave:boolean=false;
public isUnchanged:boolean=false;
public isSpecial:boolean=false;
constructor() { }
ngOnInit() {
}
setCurrentStyles() {
this.currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '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>
<button class="btn btn-success" (click)="setCurrentStyles()">设置</button>
</div>
</div>
10.NgModel的用法
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-ng-model',
templateUrl: './test-ng-model.component.html',
styleUrls: ['./test-ng-model.component.css']
})
export class TestNgModelComponent implements OnInit {
public currentRace:any={name:"随机种族"};
constructor() { }
ngOnInit() {
}
}
<div class="panel panel-primary">
<div class="panel-heading">NgModel的用法</div>
<div class="panel-body">
<p class="text-danger">ngModel只能用在表单类的元素上面</p>
<input [(ngModel)]="currentRace.name">
<p>{{currentRace.name}}</p>
</div>
</div>
11.管道的用法
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-pipe',
templateUrl: './test-pipe.component.html',
styleUrls: ['./test-pipe.component.css']
})
export class TestPipeComponent implements OnInit {
public currentTime: Date = new Date();
constructor() {
window.setInterval(
()=>{this.currentTime=new Date()}
,1000);
}
ngOnInit() {
}
}
<div class="panel panel-primary">
<div class="panel-heading">管道的用法</div>
<div class="panel-body">
{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
</div>
</div>
12.安全取值
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-safe-nav',
templateUrl: './test-safe-nav.component.html',
styleUrls: ['./test-safe-nav.component.css']
})
export class TestSafeNavComponent implements OnInit {
public currentRace:any=null;//{name:'神族'};
constructor() { }
ngOnInit() {
}
}
<div class="panel panel-primary">
<div class="panel-heading">安全取值</div>
<div class="panel-body">
你选择的种族是：{{currentRace?.name}}
</div>
</div>
最新文章
- Maven异常Type Project configuration is not up-to-date with pom.xml. Run Maven->Update Project or use Quick Fix
- Python核心编程第三版第二章学习笔记
- 2015寒假ACM训练计划
- ylbtech-LanguageSamples-XMLdoc
- No.003 Longest Substring Without Repeating Characters
- PHP 把GBK编码转换为UTF8
- hdu 5281 Senior's Gun
- 指令式Callback，函数式Promise：对node.js的一声叹息
- 动态规划——A 最大子段和
- js禁止浏览器后退,防止重复支付
- EF在单例模式及C/S方式开发时，操作数据对象以后如果发生异常，要做善后工作。
- apache-DOS
- 关于HttpClient重试策略的研究
- EBS中的采购单据状态及其控制
- JVM垃圾回收器
- <转载>css3 概述
- centos7安装zabbix3.5
- 读取JPG图片的Exif属性（一） - Exif信息简介
- 邮件的DNS设置
- mysql表空间文件