考虑一个带有 NGX-Swiper-Wrapper 插件的 Angular 6 应用程序。
Swiper 插件在 SwiperComponent 模板文件中调用:
<swiper [config]="customConfig">
...
</swiper>
Run Code Online (Sandbox Code Playgroud)
为了保持组件文件的可读性,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();
}
}
Run Code Online (Sandbox Code Playgroud)
这是服务:
import { Injectable } from '@angular/core';
...
export class DataService {
constructor() { }
getCustomConfig() {
return {
observer: true,
direction: 'vertical',
slidesPerView: …Run Code Online (Sandbox Code Playgroud)