swiperComponent中的swiper元素不存在angular13。

Question

我已经在我的swiperComponent中导入了appComponent in angular13：

import { SwiperComponent } from 'swiper/angular';

并在类中使用ViewChildren导入

  @ViewChildren('swiperSlideShow') swiperSlideShow!: QueryList<SwiperComponent>;

在模板中我有：

<swiper [config]="config" #swiperSlideShow>

当我登录时：

    ngAfterViewInit(): void {
        console.log(this.swiperSlideShow.toArray()[0]);
    }

我得到了如这张图片所示的滑动组件

​

在图像中，元素刷是明显可见的，但是当我尝试在控制台中记录它时，NPM会控制一个错误，该错误表明给定对象上不存在此属性。

TS2551: Property 'swiper' does not exist on type 'SwiperComponent'.

有人能帮我找到这个选项吗？

Answer 1

您没有提到将console.log语句放在哪里。我猜他们在ngOnInit里面。

当您仔细查看console.log输出的屏幕截图时，您会注意到很少有"i“图标。这意味着这个值可能已经改变了。DevTools使用惰性计算-当您展开树时，而不是当它被打印到控制台时，您看到的值被计算出来。请参阅：https://medium.com/young-coder/why-chromes-developer-console-sometimes-lies-9487e45e91ae

第二，console.log生成undefined，因为当时还没有定义swiper。

看看swiper/angular代码。swiper在ngAfterViewInit钩子中初始化。https://github.com/nolimits4web/swiper/blob/b8b2681de24e9b0b98cfe644e09cf281311a24f5/src/angular/src/swiper.component.ts#L533-L540

经过几次修改后，主要目的改变了。最后，它是关于swiper属性没有在SwiperComponent上从swiper/angular包中公开。