Javascript 角形旋转木马js有时加载有时不加载
我创建了一个Javascript 角形旋转木马js有时加载有时不加载,javascript,angular,Javascript,Angular,我创建了一个script.service.ts服务来在页面加载后添加js。 但是,它有时有效,有时无效 我已将所有代码附加到script.service.ts文件中 home.component.html:这是我正在展示的旋转木马 <ul class="jobcatgoryslide"> <div class="carousel js-flickity" data-flickity-options='{ "cellAli
script.service.ts
服务来在页面加载后添加js。
但是,它有时有效,有时无效
我已将所有代码附加到script.service.ts
文件中
home.component.html:这是我正在展示的旋转木马
<ul class="jobcatgoryslide">
<div class="carousel js-flickity" data-flickity-options='{ "cellAlign": "right" , "contain": "true", "pageDots": "false" , "autoPlay": 1500 }'>
<li class="carousel-cell" *ngFor="let competency of competenciesList?.competencyList">
<div class="categoryBlock">
<div class="cateIcon">
<img [src]="competency.image | image:competenciesList.s3_img_url" height="64">
</div>
<h3>{{ competency.title_en }}</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
</div>
</li>
</div>
</ul>
script.service.ts->它是脚本服务文件
import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";
declare var document: any;
@Injectable()
export class Script {
private scripts: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
}
load(...scripts: string[]) {
var promises: any[] = [];
scripts.forEach((script) => promises.push(this.loadScript(script)));
return Promise.all(promises);
}
loadScript(name: string) {
return new Promise((resolve, reject) => {
//resolve if already loaded
if (this.scripts[name].loaded) {
resolve({script: name, loaded: true, status: 'Already Loaded'});
}
else {
//load script
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
if (script.readyState) { //IE
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
}
};
} else { //Others
script.onload = () => {
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
};
}
script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
document.getElementsByTagName('head')[0].appendChild(script);
}
});
}
}
script.store.ts:这里脚本存储ts文件
interface Scripts {
name: string;
src: string;
}
export const ScriptStore: Scripts[] = [
{ name: 'flickity', src: '/assets/js/slider.js' }
];
我已经安装了
npm I ngx flickity
将FlickityModule导入应用程序的模块:
home.module.ts
import { FlickityModule } from 'ngx-flickity';
@NgModule({
imports: [
FlickityModule
]
})
home.component.html
<div class="carousel js-flickity" [flickity]="{cellAlign: 'right', contain: true,
pageDots: false , autoPlay : 1500}">
<li class="carousel-cell" *ngFor="let competency of competenciesList?.competencyList">
<div class="categoryBlock">
<div class="cateIcon">
<img [src]="competency.image | image:competenciesList.s3_img_url" height="64">
</div>
<h3>{{ competency.title_en }}</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
</div>
</li>
</div>
{{competency.title_en}
在全方位存在错误的情况下,我们可以清楚地看到这些错误
它很好用
<div class="carousel js-flickity" [flickity]="{cellAlign: 'right', contain: true,
pageDots: false , autoPlay : 1500}">
<li class="carousel-cell" *ngFor="let competency of competenciesList?.competencyList">
<div class="categoryBlock">
<div class="cateIcon">
<img [src]="competency.image | image:competenciesList.s3_img_url" height="64">
</div>
<h3>{{ competency.title_en }}</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
</div>
</li>
</div>