zoukankan      html  css  js  c++  java
  • angular组件 以及组件里面的模板

    angular 组件 以及组件里面的模板
     
    一、创建 angualr 组件.............................................................................................................. 1
    二、Angular 绑定数据...............................................................................................................2
    二、绑定属性.............................................................................................................................2
    三、数据循环 *ngFor............................................................................................................. 3
    四、条件判断 *ngIf................................................................................................................ 3
    四、 *ngSwitch..........................................................................................................................4
    五、执行事件
    (click)=”getData()”........................................................................................ 4
    七、表单事件.............................................................................................................................5
    八、双向数据绑定.....................................................................................................................5
    九、 [ngClass]、[ngStyle]..........................................................................................................6
    十、 管道...................................................................................................................................7
    一、创建 angualr 组件
    Angular CLI:
    https://cli.angular.io/
    创建组件
    ng g component components/header
    使用组件
    <app-header></app-header>二、Angular 绑定数据
    1. 数据文本绑定
    {{}}
    <h1>
    {{title}}
    </h1>
    <div>
    1+1={{1+1}}
    </div>
    2.绑定 html
    this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
    <div [innerHTML]="h"></div>
    二、绑定属性
    <div [id]="id" [title]="msg">调试工具看看我的属性</div>三、数据循环 *ngFor
    1、*ngFor
    普通循环
    <ul>
    <li *ngFor="let item of list">
    {{item}}
    </li>
    </ul>
    2、循环的时候设置 key
    <ul>
    <li *ngFor="let item of list;let i = index;">
    {{item}} --{{i}}
    </li>
    </ul>
    2. template 循环数据
    <ul>
    <li template="ngFor let item of list">
    {{item}}
    </li>
    </ul>
    四、条件判断 *ngIf
    <p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p><p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
    四、*ngSwitch
    <ul [ngSwitch]="score">
    <li *ngSwitchCase="1">已支付</li>
    <li *ngSwitchCase="2">订单已经确认</li>
    <li *ngSwitchCase="3">已发货</li>
    <li *ngSwitchDefault>无效</li>
    </ul>
    五、执行事件
    (click)=”getData()”
    <button class="button" (click)="getData()">
    点击按钮触发事件
    </button>
    <button class="button" (click)="setData()">
    点击按钮设置数据
    </button>
    getData(){ /*自定义方法获取数据*/
    //获取
    alert(this.msg);
    }
    setData(){
    //设置值
    this.msg='这是设置的值';
    }七、表单事件
    <input type="text" (keyup)="keyUpFn($event)"/>
    <input type="text" (keyup)="keyUpFn($event)"/>
    keyUpFn(e){
    console.log(e)
    }
    八、双向数据绑定
    <input [(ngModel)]="inputValue">
    注意引入:FormsModule
    import { FormsModule } from '@angular/forms';
    @NgModule({
    declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent
    ],
    imports: [
    BrowserModule,
    FormsModule
    ],
    providers: [],bootstrap: [AppComponent]
    })
    export class AppModule { }
    使用:
    <input type="text" [(ngModel)]="inputValue"/>
    {{inputValue}}
    九、[ngClass]、[ngStyle]
    [ngClass]:
    <div [ngClass]="{'red': true, 'blue': false}">
    这是一个 div
    </div>
    public flag=false;
    <div [ngClass]="{'red': flag, 'blue': !flag}">
    这是一个 div
    </div>
    public arr = [1, 3, 4, 5, 6];
    <ul>
    <li *ngFor="let item of arr, let i = index">
    <span [ngClass]="{'red': i==0}">{{item}}</span>
    </li>
    </ul>
    [ngStyle]:<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
    public attr='red';
    <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
    十、管道
    public today=new Date();
    <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
    其他管道:
     
  • 相关阅读:
    理解构造器
    if与switch的性能比较
    Java对象的内存(一)
    shell编程_条件判断if
    shell编程_基础&变量
    集群架构篇:Nginx架构演进<拆分数据库 多台web节点共享静态资源>
    集群架构篇:Nginx流行架构LNMP
    集群架构篇:Nginx常用模块
    LInux系统@安装CentOS7虚拟机
    docker pull越来越慢的解决方法
  • 原文地址:https://www.cnblogs.com/xiaoruilin/p/14404020.html
Copyright © 2011-2022 走看看