- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将 owl-carousel 实现到我的 Angular 2 应用程序中。
我按照这个例子How to use owl-carousel in Angular2?它实际上很好地解决了我的项目是异步更改(ng-content 异步更改)的唯一问题。
当我的 owl-courosel 的内容发生变化(推荐者或贬低者)时,通过在 plnkr 上实现解决方案,插件不会重新加载。所以我只看到项目列表,但它们不会滚动。
所以我有 nps-comments.component.html,其中调用了轮播组件:
<section class="purchasers comments" *ngIf="comments.promoters.length || comments.detractors.length">
<carousel class="promoters" *ngIf="comments.promoters.length" [options]="{ items: 1 }">
<p *ngFor="let promoter of comments.promoters">{{promoter}}</p>
</carousel>
<carousel class="detractors" *ngIf="comments.detractors.length" [options]="{ items: 1 }">
<p *ngFor="let detractor of comments.detractors">{{detractor}}</p>
</carousel>
</section>
然后是实际的carousel.component.ts
import {
Component,
Input,
ElementRef
} from '@angular/core';
import 'jquery';
import 'owl-carousel';
@Component({
moduleId: module.id,
selector: 'carousel',
templateUrl: 'carousel.component.html',
styleUrls: ['carousel.component.css']
})
export class CarouselComponent {
@Input() options: Object;
private $carouselElement: any;
private defaultOptions: Object = {};
constructor(private el: ElementRef) { }
ngAfterViewInit() {
for (let key in this.options) {
if (this.options.hasOwnProperty(key)) {
this.defaultOptions[key] = this.options[key];
}
}
let outerHtmlElement: any = $(this.el.nativeElement);
this.$carouselElement = outerHtmlElement.find('.owl-carousel').owlCarousel(this.defaultOptions);
}
ngOnDestroy() {
this.$carouselElement.trigger('destroy.owl.carousel');
this.$carouselElement = null;
}
}
这是 carousel.component.html:
<div class="owl-carousel owl-theme">
<ng-content></ng-content>
</div>
任何帮助将不胜感激。谢谢。
最佳答案
我正在分享我使用 owl owl.carousel@2.1.4 和 angular 2.0.0 + webpack 的解决方法。
首先,您需要通过 npm 或类似工具安装上述^包。
然后 --> npm install imports-loader
(对于在组件内使用 owl,否则你会得到 function is undefined。因为第三方模块依赖全局变量,如 $ 或 this 是窗口对象。)。
我正在使用 webpack,所以这部分是为 webpack 用户准备的:
导入加载器如下:
{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'}
你也可以使用 jQuery 作为(webpack):
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
作为插件使用:
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
对于图像加载器:
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file?name=public/img/[name].[hash].[ext]'
}
*public/img -- 图片文件夹
CSS 加载器:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
vendors.js 文件应导入以下内容:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
请注意 owl.carousel 2 仍在使用 andSelf() 已弃用的 jQuery 函数,因此我们需要用新版本的 addBack() 替换它们。
转到 owl 包 dist/owl.carousel.js 中的 node_modules 文件夹:用 --> addBack() 替换所有出现的 andSelf()。
现在是 Angular 2 部分:
owl-carousel.ts:
import {Component} from '@angular/core';
@Component({
selector: 'carousel',
templateUrl: 'carousel.component.html',
styleUrls: ['carousel.css']
})
export class Carousel {
images: Array<string> = new Array(10);
baseUrl: string = './../../../../public/img/650x350/';
}
carousel.component.ts:
import { Component, Input, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
@Component({
selector: 'owl-carousel',
template: `<ng-content></ng-content>`
})
export class OwlCarousel implements OnDestroy, AfterViewInit{
@Input() options: Object;
$owlElement: any;
defaultOptions: Object = {};
constructor(private el: ElementRef) {}
ngAfterViewInit() {
for (var key in this.options) {
this.defaultOptions[key] = this.options[key];
}
var temp :any;
temp = $(this.el.nativeElement);
this.$owlElement = temp.owlCarousel(this.defaultOptions);
}
ngOnDestroy() {
this.$owlElement.data('owlCarousel').destroy();
this.$owlElement = null;
}
}
carousel.component.html:
<owl-carousel class="owl-carousel"[options]="{navigation: true, pagination: true, rewindNav : true, items:2, autoplayHoverPause: true, URLhashListener:true}">
<div class="owl-stage" *ngFor="let img of images; let i=index">
<div class="owl-item">
<a href="#"><img src="{{baseUrl}}{{i+1}}.png"/></a>
</div>
</div>
</owl-carousel>
确保引导 app.module 中的所有内容:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {OwlCarousel} from './components/carousel/carousel.component';
import {Carousel} from './components/carousel/owl-carousel';
@NgModule({
imports: [
BrowserModule,
NgbModule,
],
declarations: [
AppComponent,
OwlCarousel,
Carousel
],
providers: [appRoutingProviders],
bootstrap: [ AppComponent ]
})
export class AppModule { }
现在您可以在 template/templateUrl 部分中的整个应用程序中使用指令/组件,无需导入任何内容。
请按照上述步骤操作,因为所有步骤都是完成 Angular 2.0.0 最终版本和 owl.carousel 2.1.4 版本之间集成所必需的。
关于angular - 如何在 Angular2 中使用 owl-carousel 异步更改 ng-content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38206810/
我知道 owl:Class 是 rdfs:class 的子类,所有 OWL 类都是 owl:Class 的成员。我还知道 owl:Thing 位于类层次结构的顶部。那么 owl:Class 和 owl
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 5 年前。
我认为我对 OWL 公理仍然存在根本性的误解:(。 这是我创建的一个小型测试本体: @prefix xsd: . @prefix rdf: . @prefix rdfs:
我是耶拿的新手。我想创建一个新的 OntModel 并需要将一些其他本体导入到该模型中。如果我将其写入文件,我希望该文件可以显示如下内容: 现在,我不知道如何通过jena将其他本
我认为我对 OWL 公理仍然存在根本性的误解:(。 这是我创建的一个小型测试本体: @prefix xsd: . @prefix rdf: . @prefix rdfs:
我是耶拿的新手。我想创建一个新的 OntModel 并需要将一些其他本体导入到该模型中。如果我将其写入文件,我希望该文件可以显示如下内容: 现在,我不知道如何通过jena将其他本
导航和点周围的容器 .owl 控件不再存在,但我需要它们。有人知道如何恢复导航和点的环绕吗? 最佳答案 如果有人正在寻找...这是我的解决方案,用于取回 owl-nav 和 owl-dots 周围的包
对于我认为非常简单的场景,如果能提供一些帮助,我将不胜感激;但作为 OWL 和 GraphDB 的新手,我可能犯了一些基本错误。 我有一个非常简单的 Turtle 指定的 OWL 示例,如下所示: @
我使用 Protege 创建了一个本体。 类- Person Man Woman 属性(域/范围) Knows(Person / Person) hasRelationShip(Per
我正在使用 Protege v4.3 制作本体。 我有一个关于 OWL 本体和 DL 查询的问题。 例如,在 Pizza 本体中, http://owl.cs.manchester.ac.uk/co-
例如,此问题主要发生在用户使用速度较慢的互联网或移动设备时。但是,当轮播中的页面内容/图像没有被缓存时,有时也会在更高的速度上看到闪烁。 如果页面加载并呈现第一个元素,所有轮播“幻灯片”就像一个列表一
我需要在Protégé中实现一个OWL-ontology,它包含两个类:s1和s2,都是System的实例> 类。这两个类是通过连接类s1_s2 连接起来的,其中包含属性omega。该属性必须根据以下
我一直在四处寻找为什么 OWL Full 是不可判定的,但我还没有找到一个易于理解的例子来让我理解它。 我发现一些陈述解释了这是由于“Entailment Closure”,并且这也与 OWL Ful
我试图理解 OWL 2 的以下公理,但不知道它们是哪种公理。这里 R 是角色,C 是类 ∃R⊑C ∃R⊑∃R.C C ⊑ ¬∃R ∃R ⊑ ¬C 到目前为止,我认为 1 提供了有关 R 范围的信息,但
当 Owl Carousel 在隐藏元素中启动,然后通过触发器显示该元素时,轮播项目的宽度完全错误(直到窗口调整大小): Fiddle (点击红色链接,看到损坏的布局出现,然后调整窗口大小) 这个问题
在构建轮播时,我意识到猫头鹰添加了克隆的重复项。我的猫头鹰配置看起来像这样。我如何阻止这种情况发生。 owlDfe.owlCarousel({ loop: false,
我有两张幻灯片。我用的是 OWL 1,效果很好。我想要无限循环,所以搬到了 OWL 2。 下面的代码效果很好。幻灯片保持同步,但自动播放永远不会开始。我必须拖动幻灯片或显示导航并单击下一个/上一个。
我们根据分别与 B 或 C 的实例具有关系 a_to_b 和 a_to_c 的实例的交集 (AND),将类 A 定义为 owl:equivalentClass 并将类 A2 定义为 rdfs:subC
我正在使用 rdflib 创建一个图形。我想使用我拥有的“.owl”文件中的一些术语。我如何使用 rdflib 将这个 owl 文件作为 MyImportedTerminology 导入,并访问它的术
通常,当我们说“我所有的 child 都是女性”时,我们的意思是“并且至少有一个”。名门pizza tutorial (V1.3)在第 100 页解决了这个问题,说拥有普遍限制 (owl:allVal
我是一名优秀的程序员,十分优秀!