You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.9 KiB
50 lines
1.9 KiB
3 years ago
|
import { Component, OnInit, ViewContainerRef } from '@angular/core';
|
||
|
|
import { NzModalService } from 'ng-zorro-antd/modal';
|
||
|
|
import { ImageLabelComponent } from '../image-label/image-label.component';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-image-list',
|
||
|
|
templateUrl: './image-list.component.html',
|
||
|
|
styleUrls: ['./image-list.component.scss']
|
||
|
|
})
|
||
|
|
export class ImageListComponent implements OnInit {
|
||
|
|
|
||
|
|
constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
|
||
|
|
imgList = [
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/bgImg.png', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' },
|
||
|
|
{ url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }
|
||
|
|
]
|
||
|
|
ngOnInit(): void {
|
||
|
|
}
|
||
|
|
goback() {
|
||
|
|
history.go(-1)
|
||
|
|
}
|
||
|
|
label(item) {
|
||
|
|
let width = document.documentElement.clientWidth
|
||
|
|
const modal = this.modal.create({
|
||
|
|
nzContent: ImageLabelComponent,
|
||
|
|
nzViewContainerRef: this.viewContainerRef,
|
||
|
|
nzComponentParams: {
|
||
|
|
imgItem: item,
|
||
|
|
},
|
||
|
|
nzWidth: width - 100,
|
||
|
|
nzCentered: true,
|
||
|
|
nzOnOk: () => new Promise(resolve => {
|
||
|
|
item.showCoord = ''
|
||
|
|
item.banCoord = ''
|
||
|
|
resolve(1)
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
const instance = modal.getContentComponent();
|
||
|
|
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
|
||
|
|
// Return a result when closed
|
||
|
|
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
|
||
|
|
}
|
||
|
|
}
|