问题描述
我是 Angular CLI 的新手,我使用的是 v11。我正在尝试创建一个图像库,单击某个图像会生成一个带有轮播的模态,在开始时显示所选图像。但是当我点击图像并出现模态时,由于某种原因@ViewChild 装饰器,它总是返回未定义。
我的模板代码如下:
<mat-card>
<mat-card-subtitle>gallery</mat-card-subtitle>
<mat-card-content>
<ng-template id="mySlides" #myModal class="h-100 h-auto" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">gallery</h4>
<button type="button" class="close mt-1" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-content">
<ngb-carousel #myCarousel>
<ng-template ngbSlide *ngFor="let img of images" id="{{img.id}}">
<div class="picsum-img-wrapper">
<img src="{{img.url}}" alt="Image {{img.id}}">
</div>
</ng-template>
</ngb-carousel>
</div>
</ng-template>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6" *ngFor="let img of images">
<a style="cursor: pointer" class="d-block mb-4 h-100"
(click)="openModal(myModal); setSlideId(img.id);navigatetoSlide(img.id)">
<img class="img-fluid img-thumbnail" src="{{img.url}}" alt="">
</a>
</div>
</div>
</mat-card-content>
</mat-card>
我的 ts 代码如下:
import {Component,ViewChild} from '@angular/core';
import {NgbCarousel,NgbCarouselConfig,NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'kt-image-gallery-thumbnail',templateUrl: './image-gallery-thumbnail.component.html',styleUrls: ['./image-gallery-thumbnail.component.scss'],providers: [NgbCarouselConfig]
})
export class ImagegalleryThumbnailComponent {
selectedSlide = 1;
constructor(private modalService: NgbModal) {
}
images = [{
id: 1,url: '../../../../assets/media/products/product1.jpg'
},{
id: 2,url: '../../../../assets/media/products/product12.jpg'
},{
id: 3,url: '../../../../assets/media/products/product11.jpg'
}];
@ViewChild('myCarousel',{static: false,read: NgbCarousel}) myCarousel: NgbCarousel;
openModal(content: any) {
this.modalService.open(content);
}
navigatetoSlide(item) {
console.log(this.myCarousel);
try {
this.myCarousel.select('' + item);
} catch (e) {
console.log(e);
}
}
setSlideId(id: number) {
console.log(id);
this.selectedSlide = id;
}
}
感谢您的帮助。
解决方法
从模板中删除 #myCarousel
然后在你的打字稿文件中简单使用
@ViewChild(NgbCarousel)
myCarousel: NgbCarousel;
编辑:阅读整个模板我看到了主要的结构问题,或者我遗漏了一些东西。
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6" *ngFor="let img of
images">
<a style="cursor: pointer" class="d-block mb-4 h-100"
(click)="openModal(myModal);
setSlideId(img.id);navigateToSlide(img.id)">
<img class="img-fluid img-thumbnail" src="{{img.url}}" alt="">
</a>
</div>
</div>
1)您希望如何在 setSlide(img.id) 和navigateToSlide(img.id) 中获取 img.id?你已经在 ngFor 之外了。这条信息不见了。
2) 我看到在一个组件中你已经声明了所有的模态以及调用它的代码。考虑将所有模态内容移动到一个单独的组件中,并在此处仅保留它表示为没有模态的页面的内容。这样你就可以更清楚地检查为什么有些东西不起作用了。
3)我认为在所有参考文献中#您都尝试了一种巧妙的方法来绕过应该实现的更复杂的代码。正如你所看到的 ngbCarousel 只属于模态内部,所以它只在模态内部工作而不是在它外部工作是正确的。如果你清理你的结构,也许你可以准确地理解是什么中断以及为什么会中断。
,我终于根据 Panagiotis Bougioukos 的建议让它工作了,而且我认为它比我所做的更简单。解决方法如下:
- 我用轮播创建了一个新组件,并从模态中调用它。
组件库-轮播
HTML 模板
<ngb-carousel #myCarousel [activeId]="item">
<ng-template ngbSlide *ngFor="let img of images" id="{{img.id}}">
<div class="picsum-img-wrapper">
<img src="{{img.url}}" alt="Image {{img.id}}">
</div>
</ng-template>
</ngb-carousel>
TS 代码
import {Component,Input,ViewChild} from '@angular/core';
import {NgbCarousel} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'kt-gallery-carousel',templateUrl: './gallery-carousel.component.html',styleUrls: ['./gallery.carousel.component.scss'],})
export class GalleryCarouselComponent {
@Input() item: string;
@ViewChild('myCarousel',{static: true,read: NgbCarousel}) myCarousel: NgbCarousel;
constructor() {
}
images = [{
id: 1,url: '../../../../assets/media/products/product1.jpg'
},{
id: 2,url: '../../../../assets/media/products/product12.jpg'
},{
id: 3,url: '../../../../assets/media/products/product11.jpg'
}];
}
- 我修改了我的图库组件
带模态的组件图片库
HTML 模板
<mat-card>
<mat-card-subtitle>Gallery</mat-card-subtitle>
<mat-card-content>
<ng-template id="mySlides" #myModal class="h-100 h-auto" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Gallery</h4>
<button type="button" class="close mt-1" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-content">
<kt-gallery-carousel [item]="selectedSlide"></kt-gallery-carousel>
</div>
</ng-template>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6" *ngFor="let img of images">
<a style="cursor: pointer" class="d-block mb-4 h-100"
(click)="openModal(myModal); setSlideId(img.id)">
<img class="img-fluid img-thumbnail" src="{{img.url}}" alt="">
</a>
</div>
</div>
</mat-card-content>
</mat-card>
TS 代码
import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'kt-image-gallery-thumbnail',templateUrl: './image-gallery-thumbnail.component.html',})
export class ImageGalleryThumbnailComponent {
selectedSlide: string;
constructor(private modalService: NgbModal) {
}
images = [{
id: 1,url: '../../../../assets/media/products/product11.jpg'
}];
openModal(content: any) {
this.modalService.open(content);
}
setSlideId(id: number) {
this.selectedSlide = '' + id;
}
}