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

Question

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

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

如有任何帮助，我们将不胜感激。

Answer 1

教程

对于初学者来说没问题 Angular 2 Quickstart是最好的。

然后继续并进入 Tour of Heroes .这也是一个很棒的教程。

工具

对于教程，坦率地说构建任何 Angular 2 应用程序，我强烈建议使用 Angular-Cli .它使构建 Angular 2 应用变得轻而易举

看看 Angular-Cli 的 Table of Contents看看它能做什么

例子

---

我的网格堆栈.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>

我的网格堆栈.component.ts ( How to get JQuery in Angular 2 )

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="assets/libs/gridstack/gridstack.js"></script>