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>

用12个例子全面示范Angular的模板语法的更多相关文章

  1. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  2. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建  ...

  3. angular 模板语法(官方文档摘录)

    https://angular.cn/guide/template-syntax {{}} 和"" 如果嵌套,{{}}里面求完值,""就是原意 <h3&g ...

  4. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  5. Angular - Templates(模板)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在Angular中,模板是一个包含了Angular特定元素和属性的HTML.Angula ...

  6. angular 缓存模板 ng-template $templateCache

    由于浏览器加载html模板是异步加载的,如果加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板. 使用angular缓存模板主要有三种方法: 方法一:通过script标签引入 <sc ...

  7. Angular for TypeScript 语法快速指南 (基于2.0.0版本)

    引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynami ...

  8. python——sklearn完整例子整理示范(有监督,逻辑回归范例)(原创)

    sklearn使用方法,包括从制作数据集,拆分数据集,调用模型,保存加载模型,分析结果,可视化结果 1 import pandas as pd 2 import numpy as np 3 from ...

  9. 图数据库orientDB(1-2)例子

    http://gog.orientdb.com/index.html#/infotab 小朱25岁,出生在教师家庭并且有个姐姐小田,他现在奋斗在帝都.  那么SQL是这样滴!!! CREATE VER ...

随机推荐

  1. C++中返回对象的情形及RVO

    http://www.cnblogs.com/xkfz007/archive/2012/07/21/2602110.html 之前有文章介绍过临时对象和返回值优化RVO方面的问题.见此处. 在C++中 ...

  2. 【Linux】Ctentos下载

    百度输入:Download Centos 在百度搜索Download Centos然后进入Centos下载官网 点击上述标记的Download Centos,则会出现如下界面,并且点击"Mo ...

  3. IOS炫酷的引导界面

    代码地址如下:http://www.demodashi.com/demo/11246.html 一.准备工作 1.先用时ps工具制作好图片 2.然后计算好每张图片通过滑动视图的偏移量来改变图片的位置 ...

  4. 2013夏,iDempiere来了 - v1.0c Installers (Devina LTS Release) 2013-06-27

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ iDempiere来了 - v1.0c Installers (Devina LTS R ...

  5. LaTex幻灯片制作

    头部声明是“幻灯片”: \documentclass{beamer} 其他: \documentclass{beamer}\usepackage{graphicx}\usepackage{epstop ...

  6. ftp客户端的创建

    1.本段代码采用了 select I/O端口复用 2.含有三种功能:ls,  上传文件, 下载文件.这是拷贝别人的代码,自己添加了注释,随后会进行修改, 自己需要的功能:上传文件, 下载文件,  (并 ...

  7. 点滴积累【C#】---C#实现下载word

    效果: 思路: 简单的有两种方式下载,一种是流下载,一种是WriteFile下载.以下是使用WriteFile下载. 代码: protected void LinkButton1_Click(obje ...

  8. atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结

    atitit.破解  拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结 1. 自动获取手机短信方式的原理 1 2. 调用api 1 3. ----核心代码 2 4.  ...

  9. [转]Windows 10 安装SVN 不显示状态图标--解决方法

    原文链接:https://www.cnblogs.com/lzpong/p/6187366.html --- auth:lzpong 升级win10以后,什么都正常,就是svn版本库图标不见了,图标的 ...

  10. zepto,kissy前端框架实现跨域

    三.jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理 json ...