一。模板简介
模板扮演的是一个视图的角色,简单讲就是展示给用户看的部分。
二。模板语法演示
具体模板的语法 使用以下例子来演示
模板代码:
<!--<h1>
{{ title }}!
</h1>
<a routerLink="/dashboard">英雄仪表盘</a> <a routerLink="/heroes">英雄列表</a>
<router-outlet></router-outlet>
<app-heroes></app-heroes>-->
<h1>
-------------------插值表达式-----------------------------<br/>
<!--插值表达式 控件类中定义属性 可以获取属性值 如果值发生了改变会自动改变 如果使用js修改了src 模型不会改变 是单向绑定-->
<font color=red>{{tit}}</font><br/>
<img src="{{imageUrl}}"/><br/>
<button (click)="changeTitle()">改变标题</button><br/>
-------------------属性绑定-----------------------------<br/>
<!--属性绑定 [标签]=绑定变量 一旦变量发生改变 标签的值也跟着改变 但是如果在js中修改了value的值 buttonText不会改变 属于单项绑定 模型改了影响value值 value值改了不影响模型值
未知属性 只能在父子控件中 使用 下面 [aa]="buttonText" 报错 aa没有这个属性
如果未知属性 可以使用 [attr.aa]="buttonText"
-->
<input type="button" [value]="buttonText" [attr.aa]="buttonText" (click)="this.buttonText='新标题'"/><br/>
<!--样式绑定
[class]="变量名" 双向绑定变量的样式名到class上
[class.样式名]=boolean类型的值的变量 变量为true样式名可用 否则不可用
[style.css样式=css样式值绑定的变量
比如 [style.color]="变量名a" //a="red" 如果是常量直接用 '100px'引用
-->
-------------------样式绑定-----------------------------<br/>
<div [class]="myClassName" [class.d]="ifShowD" [style.font-size]="'50px'">这是样式</div>
-------------------事件绑定-----------------------------<br/>
<!--
绑定事件 可以
(事件名称)="控件函数或者直接控件代码"
on-事件名称="控件函数或者直接控件代码"
-->
<input type="button" value="事件绑定" (click)="this.buttonText='新标题'" on-blur="this.buttonText='改变标题'"/><br/>
-------------------表单model数据绑定-----------------------------<br/>
<!--
[value]="user.userName" 因为是单向绑定 所以修改了value的值 实际上user.userName不会变化
后面两种都是双向绑定 不管哪方发生了变化 另外一方都会受影响
-->
用户名:<input type="text" [value]="user.userName"/><br/>
邮箱:<input type="text" [(ngModel)]="user.email"><br/>
手机号码:<input type="text" bindon-ngModel="user.phone"><br/>
<div>{{user.userName}}-{{user.email}}-{{user.phone}}</div>
-------------------指令-----------------------------<br/>
<div [ngClass]="myClassName">这是指令样式</div><br/>
<!--这里也可以调用一个方法返回json 比如 [ngStyle]=“getStyle()”-->
<div [ngStyle]="{'color':'green','font-size':'60px'}">这是指令样式</div><br/>
<!---ngIf一个表达式 返回一个boolean型的值 如果true显示该标签 false不显示 可以使用模型数据或者调用方法-->
<div *ngIf="1!=1" [ngStyle]="{'color':'green','font-size':'60px'}">这是指令样式</div><br/>
<ul>
<ol *ngFor="let i of ['zs','ls','ww']">{{i}}</ol>
</ul>
---------------------------------------------引用变量-------------
<!--可以使用一个变量绑定到控件 直接使用变量名访问控件内部成员 #变量名 或者 ref-变量名-->
<input type="text" #myText/>
<input type="button" value="绑定引用变量" (click)="this.buttonText=myText.value" /><br/>
</h1>
控件类:
export class AppComponent {
title = '英雄之旅';
tit="今日新鲜事";
imageUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535086324656&di=ac4156ee0981be74a6723edbf92eb113&imgtype=0&src=http%3A%2F%2Ftva3.sinaimg.cn%2Fcrop.0.17.711.401%2F90eb2137ly1fk0cvmxpz9j20jr0cf43p.jpg";
buttonText="改变标题";
myClassName="d";
ifShowD=true;
user:UserInfo=new UserInfo();
changeTitle(){
this.tit="王者之战";
}
getStyle(){
return {
'color':'green','font-size':'60px'
}
}
}
模块类注意引用
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
imports: [
NgModule ,FormsModule,
],