将 gridstack.js 包装到 Angular 2 组件中 [英] Wrap gridstack.js into Angular 2 component

问题描述

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

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

任何帮助将不胜感激.

解决方案

教程

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

然后继续并进入英雄之旅.这也是一个很棒的教程.

工具

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

看看 Angular-Cli 的 目录 看看它能做什么

示例

---

my-grid-stack.component.html

<div class="grid-stack-item";数据-gs-x=0"；数据-gs-y=0"；数据-GS-宽度=4"；data-gs-height=2"><div class="grid-stack-item-content"></div>
<div class="grid-stack-item";数据-gs-x=4"数据-gs-y=0"；数据-GS-宽度=4"；data-gs-height=4"><div class="grid-stack-item-content"></div>

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

import { Component, OnInit } from '@angular/core';声明 var $: any;//查询@成分({选择器:'app-my-gridstack'，templateUrl: './app/my-grid-stack/my-grid-stack.component.html',styleUrls: ['./app/my-grid-stack/my-grid-stack.component.css']})导出类 MyGridStackComponent 实现 OnInit {构造函数(){}ngOnInit() {变量选项 = {cell_height: 80,垂直边距:10};$('.grid-stack').gridstack(options);}}

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

然后不要忘记在您的 index.html

中导入

I have some Angular 1 experience, but we have a need to use gridstack.js in an Angular 2 project.

We are familiar with the gridstack-angular project, but that project is in Angular 1. I think the biggest thing I am having trouble with is the Angular 2 concepts.

Any help would be appreciated.

解决方案

Tutorials

Okay for begginers the Angular 2 Quickstart is the best.

Then that continues and moves into the Tour of Heroes. Which is also a fantastic tutorial.

Tool

For the tutorials, and quite frankly building ANY Angular 2 app, I would highly recommend using Angular-Cli. It makes building Angular 2 apps a breeze

Just take a look at the Angular-Cli's Table of Contents to see what it can do

Example

---

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 (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);
  }

}

Then I would put the gridstack.js file in the src/assets/libs/gridstack folder.

Then don't forget to import in your index.html

<script src="assets/libs/gridstack/gridstack.js"></script>

这篇关于将 gridstack.js 包装到 Angular 2 组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！