angularjs – 如何在Angular2中使用owl-carousel?
发布时间:2020-12-17 17:06:03 所属栏目:安全 来源:网络整理
导读:我是Angular2的新手,并试图将 Angularjs中的owl-carousel转换为Angular2. 以下是owl-carousel实现的index.html文件: !DOCTYPE htmlhtml ng-app="plunker"headmeta charset="utf-8" /titleAngularJS Plunker/titlescriptdocument.write('base href="' + docu
我是Angular2的新手,并试图将
Angularjs中的owl-carousel转换为Angular2.
以下是owl-carousel实现的index.html文件: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" /> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <data-owl-carousel class="owl-carousel" data-options="{navigation: true,pagination: false,rewindNav : false}"> <div owl-carousel-item="" ng-repeat="item in ::items1" class="item"> <p>{{::item}}</p> </div> </data-owl-carousel> <data-owl-carousel class="owl-carousel" data-options="{navigation: false,pagination: true,rewindNav : false}"> <div owl-carousel-item="" ng-repeat="item in ::items2" class="item"> <p>{{::item}}</p> </div> </data-owl-carousel> </body> </html> 这是app.js文件: var app = angular.module('plunker',[]); app.controller('MainCtrl',function($scope) { $scope.items1 = [1,2,3,4,5]; $scope.items2 = [1,5,6,7,8,9,10]; }).directive("owlCarousel",function() { return { restrict: 'E',transclude: false,link: function (scope) { scope.initCarousel = function(element) { // provide any default options you want var defaultOptions = { }; var customOptions = scope.$eval($(element).attr('data-options')); // combine the two options objects for(var key in customOptions) { defaultOptions[key] = customOptions[key]; } // init carousel $(element).owlCarousel(defaultOptions); }; } }; }).directive('owlCarouselItem',[function() { return { restrict: 'A',link: function(scope,element) { // wait for the last item in the ng-repeat then call init if(scope.$last) { scope.initCarousel(element.parent()); } } }; }]); 这是Angular1实现如何为Angular2实现它? 解决方法
更新
OwlCarousel2 + Angular2.3.0 ngOnDestroy() { this.$owlElement.owlCarousel('destroy'); this.$owlElement = null; } 旧版 下面是angular2 owl-carousel实现的app.ts文件: import {Component} from 'angular2/core'; import { OwlCarousel } from './owl-carousel.component'; @Component({ selector: 'app',directives: [OwlCarousel],template: ` <h2>Sample 1</h2> <owl-carousel [options]="{navigation: true,rewindNav : false}"> <div *ngFor="#item of items1"> <p>{{ item }}</p> </div> </owl-carousel> <h2>Sample 2</h2> <owl-carousel [options]="{navigation: false,rewindNav : false}"> <div *ngFor="#item of items2"> <p>{{ item }}</p> </div> </owl-carousel> <h2>Sample 3</h2> <owl-carousel [options]="{navigation: false,rewindNav : false}"> <div *ngFor="#img of images"> <img src="http://lorempixel.com/400/200/{{img}}"/> </div> </owl-carousel>` }) export class App { items1: array = [1,5]; items2: array = [1,10]; images: array = ['sports','abstract','people','transport','city','technics','nightlife','animals']; } 猫头鹰carousel.component.ts import { Component,Input,ElementRef } from 'angular2/core'; import $from 'jquery'; import 'owl-carousel'; @Component({ selector: 'owl-carousel',template: `<ng-content></ng-content>` }) export class OwlCarousel { @Input() options: object; $owlElement: any; defaultOptions: object = {}; constructor(private el: ElementRef) {} ngAfterViewInit() { for (var key in this.options) { this.defaultOptions[key] = this.options[key]; } this.$owlElement = $(this.el.nativeElement).owlCarousel(this.defaultOptions); } ngOnDestroy() { this.$owlElement.data('owlCarousel').destroy(); this.$owlElement = null; } } 您可以在plunker中看到完整示例 OwlCarousel2版本在这里https://plnkr.co/edit/FnZVxB?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |