@ViewChild 返回未定义。我无法访问模式内的轮播 ElementRef

Posted 2023-05-08

【中文标题】@ViewChild 返回未定义。我无法访问模式内的轮播 ElementRef

【英文标题】：@ViewChild returns undefined. I can not access to the carousel ElementRef inside a modal

【发布时间】：2021-05-01 15:34:55

【问题描述】：

我是 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">&times;</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" >
            </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" >
        </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;
  

感谢您的帮助。

【问题讨论】：

这能回答你的问题吗？ Angular 2 @ViewChild annotation returns undefined

不，它没有。我已经尝试过类似的方法，但 this.myCarousel 总是未定义。

【参考方案1】：

从模板中删除#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" >
        </a>
         </div>
    </div>

1) 您希望如何在 setSlide(img.id) 和 navigateToSlide(img.id) 上获得 img.id？您已经在 ngFor 之外。此信息已消失。

2) 我看到在一个组件中，您声明了所有模式以及调用它的代码。考虑将所有模态内容移动到一个单独的组件中，并在此处仅保留它表示为没有模态的页面的内容。然后一切都会更清楚，您可以检查为什么某些东西不起作用。

3) 我认为所有参考文献# 你已经尝试了一种巧妙的方法来绕过应该实现的更复杂的代码。如您所见，ngbCarousel 仅属于模态框内部，因此它仅在模态框内部而不在其外部起作用是正确的。如果你清楚你的结构，也许你可以准确地理解什么是中断以及为什么。

【讨论】：

感谢您的回答，但也没有用。部分有效的唯一方法是将此方法添加到 ts setCarousel(carousel: any) this.myCarousel = carousel; 和模态模板中的类似 <img src="img.url" alt="Image img.id" (click)="setCarousel(myCarousel)"> 然后当模态出现并且我单击某些图像时，this.myCarousel 返回 elementRef 但没有当我从模态外部尝试时。

【参考方案2】：

我终于根据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" >
    </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">&times;</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" >
        </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/product1.jpg'
  , 
    id: 2,
    url: '../../../../assets/media/products/product12.jpg'
  , 
    id: 3,
    url: '../../../../assets/media/products/product11.jpg'
  ];

  openModal(content: any) 
    this.modalService.open(content);
  

  setSlideId(id: number) 
    this.selectedSlide = '' + id;