Angular7.1.4+Typescript3.1框架学习（三）

朱雀 2021-12-16 04:32 312阅读 0赞

接着第二部分，这部分介绍常见angular指令使用

**1. 在父页面文件中添加组件**（通过ng命令生成的component）

<app-messages></app-messages>

其中messages，为组件名。

**2. Angular 绑定数据**

*  **（1）数据文本绑定**

*定义数据几种方式：*

![868126-20190322160327955-784083998.png][]

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

*html文件中变量绑定：*

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

*  **（2）绑定`HTML`**

*ts文件中定义文本：*

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

*绑定方法：*

h为ts中定义的变量，引用的时候将属性用`[]`包裹

**3. 数据循环 \*ngFor**

1) ts文件中定义数组：

export class xxxxxxxxxxxx implements OnInit {
    
      arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
      constructor() { }
    
      ngOnInit() {
      }
    
    }

2)使用

**ngFor 普通循环**

html文件中使用如下：

**循环的时候设置 key**

html文件中使用如下：

**　template 循环数据**

**4. 条件判断 \*ngIf**

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

**5. \*ngSwitch**

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

**6. 执行事件 (click)=”getData()”**

html:

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

ts:

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

**7. 表单事件**

html:

ts:

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

**8. 双向数据绑定**

注：需要引入FormsModule![868126-20190322164456385-1122953678.png][]

**9. \[ngClass\]、\[ngStyle\]**

*\[ngClass\]:*

示例1：

ts:

public flag=false;

html:

示例2：

ts:

public arr = [1, 3, 4, 5, 6];

html:

*\[ngStyle\]:*

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

示例：

ts:

public attr='red';

html:

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

**10. 管道**

ts:

public today=new Date();

html:

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

常用的管道（`pipe`）有:

大写：uppercase

小写：lowercase
    
    日期格式：date:'yyyy-MM-dd HH:mm:ss' 
    
    小数位数：number:'1.2-4'  注：{最少整数位数}.{最少小数位数}-{最多小数位数}

js对象序列化：

<p>
        {
         { { name: 'semlinker' } | json }}
    </p>

slice：

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

管道链：

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

自定义管道：

自定义管道的步骤：

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

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;
      }
    }

2）WelcomePipe 使用

<div>
       <p ngNonBindable>{
         { 'semlinker' | welcome }}</p>
       <p>{
         { 'semlinker' | welcome }}</p> 
    </div>

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);
        }
    }

4）RepeatPipe 使用

<div>
       <p ngNonBindable>
       {
         { 'lo' | repeat:3 }}
       </p>
       <p>
        {
         { 'lo' | repeat:3 }}
       </p> 
       
    </div>

转载于:https://www.cnblogs.com/biaoge80/p/10578890.html

[868126-20190322160327955-784083998.png]: /images/20211214/1ecf642fa6cc44c8b553fe0bfc4bc0bb.png
[868126-20190322164456385-1122953678.png]: /images/20211214/584d0533f6424dc292dde6a570da3527.png