将gridstack.js包装到Angular 2组件中

Question

我有一些Angular 1的经验，但是我们需要在Angular
2项目中使用gridstack.js。

我们熟悉gridstack-angular项目，但是该项目在Angular 1中。我认为我遇到的最大麻烦是Angular 2概念。

任何帮助，将不胜感激。

Answer 1

讲解

对于初学者来说， Angular
2快速入门
是最好的。

然后继续下去，进入“ 英雄 之
旅”
。这也是一个很棒的教程。

工具

对于教程，并且坦率地说，构建任何Angular 2应用程序，我强烈建议使用 Angular-
Cli 。轻松构建Angular 2应用

只需看一下Angular-Cli的 目录 ，看看它能做什么

例

my-grid-stack.component.html

<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>

my-grid-stack.component.ts （如何在Angular
2中获取JQuery）

import { Component, OnInit } from '@angular/core';
declare var $: any; // JQuery

@Component({
  selector: 'app-my-gridstack',
  templateUrl: './app/my-grid-stack/my-grid-stack.component.html',
  styleUrls: ['./app/my-grid-stack/my-grid-stack.component.css']
})
export class MyGridStackComponent implements OnInit {

  constructor() { }

  ngOnInit() {
      var options = {
          cell_height: 80,
          vertical_margin: 10
      };
      $('.grid-stack').gridstack(options);
  }

}

然后，我将gridstack.js文件放在文件src/assets/libs/gridstack夹中。

然后，别忘了导入 index.html

<script src="ashtml" target="_blank">sets/libs/gridstack/gridstack.js"></script>