ionic升华过程6-angularjs2模板语法

一。模板简介
模板扮演的是一个视图的角色，简单讲就是展示给用户看的部分。

二。模板语法演示
具体模板的语法使用以下例子来演示
模板代码：

 <!--<h1>
    {{ title }}!
</h1>
<a routerLink="/dashboard">英雄仪表盘</a>&nbsp;&nbsp;<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, 
  ],

ionic升华过程6-angularjs2模板语法

猜你喜欢