考虑使用NGX-Swiper-Wrapper插件的Angular 6应用。
在SwiperComponent模板文件中使用以下命令调用Swiper插件:
<swiper [config]="customConfig">
...
</swiper>
为了使组件文件更具可读性,请从服务中进行swiper配置:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
...
export class SwiperComponent implements OnInit {
customConfig: SwiperConfigInterface;
constructor(private dataService: DataService) { }
ngOnInit() {
this.customConfig = this.dataService.getCustomConfig();
}
}
这是服务:
import { Injectable } from '@angular/core';
...
export class DataService {
constructor() { }
getCustomConfig() {
return {
observer: true,
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
...
};
}
// Lots of other configs here
...
}
出现错误:
错误TS2322:键入'{... slidesPerView:字符串; ...' 不是 可分配给类型“ SwiperConfigInterface”。财产种类 'slidesPerView'不兼容。类型“字符串”不可分配给 输入'number | “自动”。
可以以残酷的方式忽略此错误,只是将customConfig
变量的类型从SwiperConfigInterface
更改为any
。但是,有人知道解决此问题的更好方法吗?
答案 0 :(得分:1)
slidesPerView
的{{1}}属性需要类型为SwiperConfigInterface
的值或类型为number
的值:
'auto'
根据错误消息,Typescript在此对象中将slidesPerView?: number | 'auto',
视为类型'auto'
:
string
通过强制转换,您可以强制编译器将其视为return {
observer: true,
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
...
};
类型的值:
'auto'