1

我正在开始一个新的、简单的 Angular 2.0 应用程序，并希望有可以拖动的项目列表。

Sortablejs似乎是一个很好的工具，但似乎有几个障碍。据我所知，我必须：

1) 使用ng-sortable将 Sortable.js 包装在 Angular 1 属性指令中。

2) 使用UpgradeAdapter将 Angular 1 元素指令用作 Angular 2 组件。

3) 使用升级工具周围的ngadapter包装器来启用除了组件指令之外的属性指令。

然后我需要包含所有文件并将所有说明混合在一起。

从angular-cli生成的应用程序开始，我生成了一条路线，并安装了 npm ngadapter、angular、UpgradeAdapter 和 sortablejs。我将此添加到我的 index.html 文件中

<script type="text/javascript" src="/node_modules/sortablejs/ng-sortable.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular-min.js"></script>

我像这样创建了一个 upgrade_adapter.ts 文件

import { UpgradeAdapter } from '@angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter();

我将 main.ts 文件编辑为如下所示：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { MySimpleAppComponent, environment } from './app/';
import { upgradeAdapter } from './app/upgrade_adapter';
import { angular } from '../node_modules/angular'; // here's the problem. I don't know how to get angular
import { ngAdapter } from 'ngAdapter/build/ngAdapter';

//create your AngularJS module 
let module = angular.module('MyApp', []);

//create adapter 
let adapter = new ngAdapter(module);

if (environment.production) {
  enableProdMode();
}

// bootstrap(MySimpleAppComponent);          // what it was originally
adapter.bootstrap(document.body, ['MyApp']); // from ngadapter instructions

我确定这里有很多错误，但第一条错误消息是

  • 找不到名称“角度”

我很确定答案在system.js 文档的页面中，但我没有得到它。你知道如何设置角度对象吗？我走在正确的轨道上吗？我没有与 Sortable 结婚，但我希望在尝试将其他库与 Angular 2 一起使用时会遇到同样的问题，并且想弄清楚如何去做。

有没有更好或标准的方法来使用不是为 Angular 2 制作的优秀 javascript 库？

4

0 回答 0