angular - @ViewChild 返回未定义。我无法访问模式内的轮播 ElementRef
问题描述
我是 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 仅属于模态框内部,因此它仅在模态框内部而不在其外部起作用是正确的。如果你清楚你的结构,也许你可以准确地理解什么中断和为什么。
推荐阅读
- unity3d - 借助 Unity 中的 Leap Motion Controller,虚拟手在与对象交互时会穿透对象。有没有办法避免这种情况?
- gnuplot - gnuplot 绘制两个日期的差异间隔
- python - 如何在 Python 中为表数据制作正则表达式
- excel - 错误:1004 无法获取工作表函数类的周数属性
- eclipselink - eclipselink JPQL 错误:按项目排序不是有效的表达式
- deployment - 为什么 VS2017 在 Publish 和部署项目的 setup/msi 中不包含 librdkafka
- php - `,` 后的正则表达式捕获由 `AND` 分隔的所有文本
- sql - SSMS 中缺少添加索引箭头
- tensorflow - 在 torchvision.models.resnet34 中训练 resnet 预训练模型时,Pytorch 如何在 ImageNet 中处理图像?
- firebase - 如何在 Spring Boot Project 中的 Heroku 上使用 Google API 凭据