文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

三、Angular 组件及组件里的模板

发布于 2024-03-27 21:22:03 字数 14162 浏览 0 评论 0 收藏 0

3.1 创建 angualr 组件

1. 创建组件

ng g component components/header

2. 使用组件

<app-header></app-header>

3.2 Angular 绑定数据

1. 数据文本绑定

定义数据几种方式

<h1>{{title}}</h1>

2. 绑定 HTML

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

<div [innerHTML]="h"></div>

3.3 声明属性的几种方式

public 共有（默认）可以在类里外使用
protected 保护类型只能在当前类和子类中使用
private 私有类型只能在当期类使用

3.4 绑定属性

用 [] 包裹

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

3.5 数据循环 *ngFor

1. *ngFor 普通循环

export class HomeComponent implements OnInit {

  arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
  constructor() { }

  ngOnInit() {
  }

}

<ul *ngIf="arr.length>0">
    <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>

2. 循环的时候设置 key

<ul>
<li *ngFor="let item of list;let i = index;"> <!-- 把索引 index 赋给 i -->
   {{item}} --{{i}}
</li> </ul>

3. template 循环数据

<ul>
  <li template="ngFor let item of list">
{{item}}
</li> </ul>

3.6 条件判断 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

3.7 *ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

3.8 执行事件 (click)=”getData()”

<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>

getData(){ /*自定义方法获取数据*/ //获取
  alert(this.msg);
} 
setData(){
  //设置值
  this.msg='这是设置的值';
}

3.9 表单事件

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

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

keyUpFn(e){
  console.log(e)
}

3.10 双向数据绑定

<input [(ngModel)]="inputVal">

注意引入: 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}}

3. 11 [ngClass]、[ngStyle]

1. [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>

2. [ngStyle]:

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

public attr='red';

<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

3.12 管道

public today=new Date();

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其他管道

angular 中的管道( pipe ) 是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等

angular 中的管道( pipe ) 以及自定义管道适用于 angular4 angualr5 angualr6 angular7

常用的管道（ pipe ）有

1. 大小写转换

<!--转换成大写-->
<p>{{str | uppercase}}</p>

<!--转换成小写-->
<p>{{str | lowercase}}</p>

2. 日期格式转换

<p>
{{today | date:'yyyy-MM-dd HH:mm:ss' }}
</p>

3. 小数位数

接收的参数格式为 {最少整数位数}.{最少小数位数}-{最多小数位数}

<!--保留 2~4 位小数-->

<p>{{p | number:'1.2-4'}}</p>

4. JavaScript 对象序列化

<p>
  {{ { name: 'semlinker' } | json }}
</p> 
<!-- Output: { "name": "semlinker" } -->

5. slice

<p>{{ 'semlinker' | slice:0:3 }}</p> 
<!-- Output: sem -->

6. 管道链

<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 

<!-- Output: SEM -->

7. 自定义管道

自定义管道的步骤：

使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
实现 PipeTransform 接口中定义的 transform 方法

7.1 WelcomePipe 定义

import { Pipe, PipeTransform } from '@angular/core';

[@Pipe](/user/Pipe)({ name: 'welcome' })

export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
  if(!value) return value;
  if(typeof value !== 'string') {
    throw new Error('Invalid pipe argument for WelcomePipe');
  }
  return "Welcome to " + value;
  }
}

7.2 WelcomePipe 使用

<div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>

7.3 RepeatPipe 定义

import {Pipe, PipeTransform} from '@angular/core';

[@Pipe](/user/Pipe)({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
  transform(value: any, times: number) {
    return value.repeat(times);
  }
}

7.4 RepeatPipe 使用

<div>
   <p ngNonBindable>
   {{ 'lo' | repeat:3 }}
   </p>
   <p>
  {{ 'lo' | repeat:3 }}
   </p> 
   <!-- Output: lololo -->
</div>

3.13 实现一个人员登记表单-案例

# 创建组件
ng g component components/form

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

  public peopleInfo:any = {
  username: '',
  sex: '2',
  cityList: ['北京', '上海', '深圳'],
  city: '上海',

  hobby:[{
      title: '吃饭',
      checked:false
    },{
      title:'睡觉',
      checked:false
    },{

      title:'敲代码',
      checked:true
    }],

    mark:''
  }

  constructor() { }

  ngOnInit() {

  }
  doSubmit(){
  /*  
  jquery  dom 操作
    <input type="text" id="username" />
    let usernameDom:any=document.getElementById('username');
    console.log(usernameDom.value);  
  */

  console.log(this.peopleInfo);
  }
}

<h2>人员登记系统</h2>

<div class="people_list">
  <ul>
  <li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>
  <li>性 别：
    <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　
    <input type="radio" value="2" name="sex"  id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label>
  </li>
   <li>
  城 市：
    <select name="city" id="city" [(ngModel)]="peopleInfo.city">
      <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
    </select>
  </li>
  <li>
    爱 好：
    <span *ngFor="let item of peopleInfo.hobby;let key=index;">
      <input type="checkbox"  [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>
      &nbsp;&nbsp;
    </span>
   </li>
   <li>
     备 注：
     <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
   </li>
  </ul>

  <button (click)="doSubmit()" class="submit">获取表单的内容</button>
  <br>
  <br>
  <br>
  <br>

  <pre>
  {{peopleInfo | json}}
  </pre>
</div>

h2{
  text-align: center;
}
.people_list{
  width: 400px;
  margin: 40px auto;
  padding:20px;
  border:1px solid #eee;
  li{
    height: 50px;
    line-height: 50px;
    .fonm_input{
      width: 300px;
      height: 28px;
    }
  }

  .submit{
    width: 100px;
    height: 30px;
    float: right;
    margin-right: 50px;
    margin-top:120px;
  }
}

3.14 实现一个完整的 ToDo-案例

基础版

# 创建组件
ng g component components/todo

<h2>todoList</h2>
<div class="todolist">
  <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
  <hr>
  <h3>待办事项</h3>
  <ul>
    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
     <input type="checkbox" [(ngModel)]="item.status" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
    </li>
  </ul>
  <h3>已完成事项</h3>
  <ul>
    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
     <input type="checkbox" [(ngModel)]="item.status" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
    </li>
    </ul>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {

  public keyword: string;

  public todolist: any[] = [];

  constructor() { }

  ngOnInit() {
  }
  doAdd(e){
  if(e.keyCode == 13){
    if(!this.todolistHasKeyword(this.todolist, this.keyword)){
      this.todolist.push({
      title: this.keyword,
      status: 0           //0 表示代办事项  1 表示已完成事项
      });
      this.keyword='';
    }else{
      alert('数据已经存在');
      this.keyword='';
    }
   }
  }

  deleteData(key){
  this.todolist.splice(key,1);
  }
  
  //如果数组里面有 keyword 返回 true  否则返回 false
  todolistHasKeyword(todolist:any, keyword:any){
  //异步  会存在问题
  // todolist.forEach(value => {

  //   if(value.title==keyword){

  //     return true;
  //   } 
  // });
  if(!keyword)  return false;

  for(var i=0; i<todolist.length; i++){
    if(todolist[i].title==keyword){
      return true;
    } 
  }
  return false;
  }

}


h2{
  text-align: center;
}
.todolist{

  width: 400px;
  margin: 20px auto;
  .form_input{

    margin-bottom: 20px;

    width: 300px;
    height: 32px;
  }


  li{

    line-height: 60px;
  }

}

3.15 搜索缓存数据-案例

基础版

# 创建组件
ng g component components/search

<div class="search">
  <input type="text" [(ngModel)]="keyword" />  <button (click)="doSearch()">搜索</button>
  <hr>
  <ul>
    <li *ngFor="let item of historyList;let key=index;">{{item}}   ------ <button (click)="deleteHistroy(key)">X</button></li>
  </ul>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  public keyword: string;
  public historyList: any[] = [];

  constructor() { }
  ngOnInit() {
  }
  doSearch(){
  if(this.historyList.indexOf(this.keyword)==-1){
    this.historyList.push(this.keyword);
  }
  this.keyword = '';  
  }
  deleteHistroy(key){
    alert(key);
    this.historyList.splice(key,1);
  }
}

.search{

  width: 400px;
  margin: 20px auto;
  input{

    margin-bottom: 20px;

    width: 300px;
    height: 32px;
  }

  button{
    height: 32px;
    width: 80px;
  }
}

分享到QQ

分享到微博