zoukankan      html  css  js  c++  java
  • Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    创建 angular 组件

     https://github.com/angular/angular-cli

      

    创建组件命令

    为了便于项目的管理和维护,我们将自己创建的组件存放进单独的文件夹。

    在 app 文件夹下,我们创建一个名为 components 的文件夹用于存放我们的自定义组件。

      

    然后我们使用命令,创建组件

    ng g component components/header
    

     

    组件内文件介绍

     

    其中,header.component.ts 文件中,selector 表示此组件的名称。

      

    组件的使用

     编写组件HTML - header.component.html

    <h2>这是一个头文件</h2>

      

    在 app.component.html 文件中使用header组件

    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    
    <app-header></app-header>
    
    <router-outlet></router-outlet>

       

    angular4.x 绑定数据

    绑定文本

     首先我们编写 header组件的 ts 文件

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.css']
    })
    export class HeaderComponent implements OnInit {
    
      /**属性写在这里 */
      title = "hello world"
    
      msg:any; /**另一种定义属性的方法 */
    
    
      constructor() { } /**构造函数 */
    
      ngOnInit() {  /**生命周期函数 */
    
        this.msg = "你好 世界"
    
      }
    
    }

     

     

     再来编写 header 组件的html文件,实现数据绑定。

    <h2>这是一个头文件</h2>
    
    <h1>{{title}}</h1>
    
    <h2>{{msg}}</h2>

     

     为了看起来更加简洁,我们将主文件的多余代码删除,只调用 header 组件。

    <app-header></app-header>

    效果如下

      

    定义属性我们还可以给他加修饰符

      // 定义属性可以给他加修饰符
      public username = "wangjiawei"

    声明属性的几种方法:

    • public:共有(默认)    ——可以在类里面使用,也可以在类外边使用
    • protected:保护类型   ——只有在当前类和他的子类里面可以使用
    • private:私有     ——只有在当前类才可以访问这个属性

    定义属性的时候可以声明类型

    public student: string = "wangjiawei"

     绑定属性

     ts 文件

      /**绑定属性 */
      id = "123"

    html文件

    <div id="{{id}}">看一下我的属性</div>

     

    另一种绑定属性的方法

    ts 文件不用变,html 文件属性名使用[]方括号括起来,绑定时不需要再加{{}}

    <div [title]="msg">鼠标上去试一下</div>

     

     

    绑定后台的HTML数据

    使得HTML标签可以渲染在页面上。

    ts 文件

      /**绑定后台的html数据 */
      public h ="<h2>这是后台请求回来的数据</h2>"

    html 文件

    <span [innerHtml]="h"></span>

     

    绑定对象

    ts 文件

      /**对象 */
      public obj = {
        name:'张三'
      }

    html 文件

    <span>{{obj.name}}</span>

    数据循环  *ngFor

    循环数据

     ts 文件

     /**数据循环 */
      public list=[]
    
      constructor() { /**构造函数 */
    
        this.list=['111','222','333','444','555'];
    
       } 

     

    html 文件

    <ul>
        <!-- let 如同 var -->
        <li *ngFor="let item of list">{{item}}</li>
    </ul>

     

     

    循环数据并获取索引值

    ts 文件

    /**数据循环 */
      public list2:any[];
    
      constructor() { /**构造函数 */
    
        this.list2=['语文','数学','外语','计算机']
    
       } 

    html 文件

    <ul>
      <!-- let 如同 var -->
      <li *ngFor="let item of list2;let key=index">{{item}}----{{key}}</li>
    </ul>

      

    循环难度升级1

     ts 文件

     public list3:any[];
    
      constructor() { /**构造函数 */
    
        this.list3=[
          {'title':'11111111111'},
          {'title':'22222222222'},
          {'title':'33333333333'},
          {'title':'44444444444'}
        ]
    
       } 

    HTML 文件

    <ul>
      <!-- let 如同 var -->
      <li *ngFor="let item of list3;let key=index">{{item.title}}----{{key}}</li>
    </ul>

      

    循环难度升级2

    ts 文件

      public list4: any[];
    
      constructor() { /**构造函数 */
    
        this.list4=[
          {
            'catename':'宝马',
            "list":[
              {'title':'宝马x1'},
              {'title':'宝马x2'},
              {'title':'宝马x3'},
              {'title':'宝马x4'}
            ]
          },
          {
            'catename':'奥迪',
            "list":[
              {'title':'奥迪q1'},
              {'title':'奥迪q2'},
              {'title':'奥迪q3'},
              {'title':'奥迪q4'}
            ]
          },
        ]
    
      }

    HTML 文件

    <ul>
      <!-- let 如同 var -->
      <li *ngFor="let item of list4;let key=index">
          {{item.catename}}----{{key}}
            <ol>
                <li *ngFor="let car of item.list">
                    {{car.title}}
                </li>
            </ol>
    
      </li>
    </ul>

       

    事件

    获取属性值

    angular 中添加事件使用 () 括号创建。

    ts 文件

      // 自定义方法
      getMsg(){
        // 获取属性的值
        alert(this.msg);
      }

       

    html 文件

    <button (click)="getMsg()">执行方法</button>

      

       

    改变属性值

     ts 文件

      public username:any;
    
      constructor() {
    
        this.username = "王佳伟"
    
       }
        setName(){
            // 改变属性的值
            this.username="Jayvee Wong"
        } 

      

    html 文件

    {{username}}
    <br>
    <button (click)="setName()">改变username的值</button>

       

      

     判断语句 *ngIf

    ts 文件

    public flag: any;
    
    constructor() {
    
       this.flag = true;
    
    }

       

    html 文件

    条件判断语句 <br>
    <div *ngIf="flag">flag=true的情况下面显示</div>
    <button (click)="flag=!flag">切换flag的值</button>

      

     

    表单处理

    点击回车弹窗回车文字案例

     ts 文件

    keyUp(e){  // e 为事件对象,需要在前端传入
        // 键盘抬起
        // console.log(e)
        if(e.keyCode==13){
          alert('回车')
        }
      }

      

    html 文件

    <input type="text" (keyup)="keyUp($event)">

       

      

    双向数据绑定

       注意 :angular4.x中,使用双向数据绑定,首先得引入 FormsModule 模块。

    引入 FormsModule 模块

     首先,在 app.module.ts 引入FormsModule模块

    import { FormsModule } from '@angular/forms';

      

    然后在下面的 import 中声明一下

      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
      ],

       

    然后就可以使用双向数据绑定了。

    双向数据绑定的使用

     在输入框输入值,单击按钮,获取输入框的值然后弹窗弹出。

    ts 文件

    public search:any;
    
      constructor() {
    
         this.search='搜索的内容';
    
      }
    
    getSearch(){
        alert(this.search)
    }

       

    html 文件

    双向数据绑定
    <input type="text" [(ngModel)]="search">
    {{search}}
    <br>
    <button (click)="getSearch()">获取输入框输入的值</button>

      

      

    ToDoList 项目

    创建新组件 todolist

    在之前学习的项目基础上创建一个新的组件,叫 todolist 。

      

      

    项目代码

    html 文件

    <input type="text" [(ngModel)]='username' (keydown)='addData($event)'>
    <hr>
    
    <h2>正在进行</h2>
    <ul>
      <li *ngFor="let item of list;let i = index;" [hidden]="item.status==2">
        <button (click)="changeData(i)">改变数据</button> {{item.username}} --------- <button (click)="deleteData(i)">删除</button>
      </li>
    </ul>
    
    <h2>已经完成</h2>
    <ul>
      <li *ngFor="let item of list;let i = index;" [hidden]="item.status==1">
        <button (click)="changeData(i)">改变数据</button> {{item.username}} --------- <button (click)="deleteData(i)">删除</button>
      </li>
    </ul>

    ts 文件

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-todolist',
      templateUrl: './todolist.component.html',
      styleUrls: ['./todolist.component.css']
    })
    export class TodolistComponent implements OnInit {
    
      public username: any;
    
      public list = [];
    
      constructor() {
        this.username = '';
      }
    
      ngOnInit() {
      }
    
      addData(e) { // 添加数据
        // alert(this.username)
        if (e.keyCode == 13) {  // 检测是否按回车
          var obj = {  /***每次增加的一个对象数据 */
            username: this.username,
            status: 1
          }
          this.list.push(obj)
          this.username = ''
        }
      }
    
      deleteData(key) {  // 删除数据  传进索引值
        this.list.splice(key, 1)   /**删除数组的数据:从key索引开始删除,删除一个数据 */
      }
    
      changeData(key) {   // 改变状态
        this.list[key].status = 2
      }
    
    }

       

      

  • 相关阅读:
    商贸通帐套隐藏方法
    固定资产打开提示:上年度数据未结转!
    ZOJ 2432 Greatest Common Increasing Subsequence
    POJ 1080 Human Gene Functions
    POJ 1088 滑雪
    POJ 1141 Brackets Sequence
    POJ 1050 To the Max
    HDOJ 1029 Ignatius and the Princess IV
    POJ 2247 Humble Numbers
    HDOJ 1181 变形课
  • 原文地址:https://www.cnblogs.com/wjw1014/p/10346885.html
Copyright © 2011-2022 走看看