Angular引入ant.desigin的Transfer穿梭框和轮播图

引入穿梭框

• xxxx表示随意的文件名

首先在xxxx.module.ts文件中，引入对应模块’

import { NzTransferModule } from 'ng-zorro-antd/transfer';

@NgModule({
    imports: [
   		// ...省略
        NzTransferModule,
    ],
    declarations: [earnumberDetailComponent],
    providers: [BackupBatchSettingService],
})
export class BackupBatchSettingModule { }
1
2
3
4
5
6
7
8
9
10
11

接着在对应的业务组件里 xxxx.component.ts

引入后 在class里面定义该列表，并定义其刚刚引入的类型

import { TransferItem } from 'ng-zorro-antd/transfer';

export class earnumberDetailComponent {
    transferList: TransferItem[] = []; //当前穿梭框列表
}
1
2
3
4
5

ant.desigin是根据列表内的direction字段去区分当前数据在左侧还是右侧，值为left在左侧，right在右侧。
注意的是列表页面请求回来之后，需要手动赋值一下

    /**
     * 获取当前xxxx列表 弹窗
     */
    init(): Promise<number> {
        return new Promise((reslove) => {
            this.service.getBackupFileOData([
                ['InState', '=', 2],
            ]).load().then((res) => {
                res.forEach(item => {
                    item.direction = 'left' //该字段用于控制 穿梭框在左侧还是右侧
                })
                this.transferList = res
                reslove(1)
            })
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在对应的业务组件里 xxxx.component.html

<nz-transfer class="nx_transfer" 
   [nzTitles]="['选择耳号', '已选择耳号']" 
   [nzDataSource]="transferList"
   [nzDisabled]="disabled" 
   nzShowSearch 
   [nzFilterOption]="filterOption" 
   (nzSearchChange)="search($event)"
   (nzSelectChange)="select($event)" 
   (nzChange)="change($event)" 
   nzSearchPlaceholder="请输入耳号/品种/批次进行搜索"
   [nzListStyle]="{ 'width.px': 350, 'height.px': 435 }" 
   [nzRender]="render"
   >
	<ng-template #render let-item>
	    <span class="nx_transfer_showText">{{ item.EarNumber }}span>
	    <span>{{ item.VarietiesName }}span>
	ng-template>
nz-transfer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对应的事件

• 其中搜索 filterOption 是前端做的过滤
• change这里我有一个业务需求，表格内进行选择穿梭框，当前已经选择的，去其他行，数据需要过滤掉，所以这里我用new set 去处理

    /*** 当前列表已经选择的数据*/
    nowSelectList = new Set()
    // -------------  上面为伪代码，nowSelectList 为当前class的变量 ----------------
   filterOption(inputValue: string, item: any) {
        return item.EarNumber.indexOf(inputValue) > -1 ||
            item.VarietiesName.indexOf(inputValue) > -1
    }
    search(ret: {}): void {
        // console.log('nzSearchChange', ret);
    }
    select(ret: {}): void {
        // console.log('nzSelectChange', ret);
    }
    change(ret: any = {}): void {
        //右侧去 就push
        if (ret.to == "right") {
            ret.list.forEach((item) => {
                this.nowSelectList.add(item.PigID)
            })
        } else if (ret.to == "left") {
            ret.list.forEach((item) => {
                this.nowSelectList.delete(item.PigID)
            })
        }
    }

	// 业务代码，主要作用是控制弹窗显示后，过滤掉其他行已经选择（去右侧的数据）
    poupShow(data){
          this.transferNumberOrderDetail = data
          //过滤掉当前已选择的数据,但是如果该列表下已选择的(去右侧的)当然要显示出来了
          let _filterList = data.transferList.filter((item) => {
              if (!this.nowSelectList.has(item.PigID)) {
                  return item
              } else if (item.direction == 'right') {
                  return item
              }
          })
          this.transferList = _filterList
          this.poupVisible = true;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

页面效果截图

引入轮播图

轮播图就比较简单了 官网有对应的案例，这里只做简单的记录

• xxxx表示随意的文件名

首先在xxxx.module.ts文件中，引入对应模块’

import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzIconModule } from 'ng-zorro-antd/icon';

@NgModule({
    imports: [
   		// ...省略
        NzCarouselModule ,
        NzIconModule ,
    ],
    declarations: [earnumberDetailComponent],
    providers: [BackupBatchSettingService],
})
export class BackupBatchSettingModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13

在对应的业务组件里 xxxx.component.html

<nz-carousel 
	id="carousel" 
	(nzBeforeChange)="nzBeforeChange($event)" 
	#carousel 
	class="nx-nz-carousel"
	nzEffect="scrollx"
   >
   <div class="item_box" nz-carousel-content *ngFor="let item of phototUrls">
       <img class="item_img" src="{{item}}" alt="">
   div>
nz-carousel>
<div class="nx-btn-carousel p-left-btn partner-perv" (click)="carousel.pre()">
     <i nz-icon type="left">i>
 div>
 <div class="nx-btn-carousel p-right-btn partner-next" (click)="carousel.next()">
     <i nz-icon type="right">i>
 div>
 <div class="btm">
     <span>{{popEarNumber}}span>
     <span>
         共<i>{{phototUrls.length}}i>张，
         当前第<i>{{numOrder+1}}i>张
     span>
 div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

接着在对应的业务组件里 xxxx.component.ts

import { TransferItem } from 'ng-zorro-antd/transfer';

export class earnumberDetailComponent {
    numOrder:number=0 //记录当前在第几张
    phototUrls=[] //接口请求回来的图片列表
    popEarNumber = ''
    @ViewChild('carousel', { static: false }) carousel;
    
    //改变事件回调 记录当前在第几张
    nzBeforeChange(e){
        this.numOrder=e.to
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

页面效果如下图

以上就是Angular引入ant.desigin的Transfer穿梭框和轮播图carousel的全部内容，比较简单