Question

我已经在我的angular 2应用程序中将ngx-slick与ng2-gridstack集成在一起。＆＃34; NGX-光滑＆＃34;在集成到＆＃34; ng2-gridstack＆＃34;之前工作正常。我根本没有收到任何错误消息。我的代码如下。

的package.json

"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"ng2-gridstack": "^1.0.0",
"ngx-slick": "^0.1.3",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slick</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
    <script src="https://unpkg.com/slick-carousel@1.6.0/slick/slick.js"></script>

</head>
<body>
<app-root></app-root>
</body>
</html>

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';


    import { AppComponent } from './app.component';
    import { SlickModule } from 'ngx-slick';
    import { GridStackModule } from 'ng2-gridstack';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        GridStackModule,
        SlickModule.forRoot()

      ],
      providers: [

      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.html

<gridStack w="12" animate="true" [options]="gridstackOptions">
  <div gridStackItem
      [x]="0" [y]="0" [h]="3" [w]="12" [customid]="10">

      <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
              <img src="{{ slide.img }}" alt="" width="100%">
        </div>
      </ngx-slick>

  </div>
</gridStack>

app.component.ts

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  slides = [
    {img: "http://placehold.it/350x150/000000"},
    {img: "http://placehold.it/350x150/111111"},
    {img: "http://placehold.it/350x150/333333"},
    {img: "http://placehold.it/350x150/666666"},
    {img: "http://placehold.it/350x150/000000"},
    {img: "http://placehold.it/350x150/111111"},
    {img: "http://placehold.it/350x150/333333"},
    {img: "http://placehold.it/350x150/666666"}
  ];
  slideConfig = {
    autoplay: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    infinite: false,
    respondTo: 'slider',
    centerMode: false,
    autoplaySpeed: 1000,
    variableWidth: true,
    speed: 600
  };

  gridstackOptions = {
    acceptWidgets: true,
    alwaysShowResizeHandle: false,
    disableResize: true,
    animate: true,
    cellHeight: '90px',
    verticalMargin: '14px',
    auto : true
  };

  addSlide() {
    this.slides.push({img: "http://placehold.it/350x150/777777"})
  }

  removeSlide() {
    this.slides.length = this.slides.length - 1;
  }

  afterChange(e) {
    console.log('afterChange');
  }
}

我在html / css / js中有相同的设置，并且我试图将这些代码集成到angular 2应用程序中。有人可以帮我一个忙吗？

当与Angular 2中的ng2-gridstack集成时，ngx-slick不起作用（Angular 5）

0 个答案: