Question

我最近开始学习Angular 4，希望能在一些项目上学习（我还在学习很多基础知识，所以我的问题看起来很明显）。在过去，我一直在使用jQuery进行大多数DOM操作，但是现在使用Angular，有一些非常明显的变化，这使得在Angular应用程序中使用jQuery更加麻烦。

我已经阅读了许多关于在Angular项目中使用jQuery的Stack Overflow帖子，但是他们都建议从组件打字稿文件中编写jQuery函数。这是有道理的，因为Angular应该基于组件。我唯一的问题是如何在组件本身之外创建全局级jQuery函数。

例如，在过去，我总是创建一个js文件来保存我的jQuery函数，并在我的html文件中引用它们。这种情况的一个例子是图像的视差函数。如果我想为不同的视差图像添加一些不同的样式，我可以做得很好并且仍然让我的jQuery完成它的工作，但是现在说例如我有两个不同的视差组件使用相同的jQuery代码，是否有一个（右））通过一个包含jQuery代码的全局js文件从不同组件中引用相同函数的方法？

我的假设是我可以创建一个文件“xxxx.js”来保存这些函数并在index.html文件中引用它。我只想知道我所描述的内容是否可行，如果是，那么最佳方法是什么。

Answer 1

我可能会使用依赖注入，方法是：

创建一个包含所有常用功能的服务文件跨职能部门。
将它们用作目标组件中的提供程序。
使用Dependancy注入为此类服务创建对象，并在我的组件中使用它们。

至于“创建一个js并包含在index.html中并使用跨组件”的方法， 是的，有可能 。我已将它用于我项目中的一个外部库，这是一个js文件。步骤应该是：

复制src / assets / javascript

在index.html

中添加它们

$query = $mysqli->query("SELECT DISTINCT `id` FROM `table`");

if($query){
  $IDs = new SplFixedArray($query->num_rows);
  $IDs = $query->fetch_all();
  unset($query, $row);


  set_time_limit(300);
  foreach ($IDs as $key => $value) {
    $query = $mysqli->query("SELECT SUM(price), dtime FROM `table` WHERE `id` = '".$value[0]."' ORDER BY dtime DESC");
    if($query){
      $row = $query->fetch_assoc();
      print_r($row);
    }
  }

如组件部分（组件指令之前）所示声明你的js函数，如下所示：
```
<script src="assets/javascript/yourFile.js"></script>
```
现在，您可以在目标组件中使用您的功能。

Answer 2

当您使用框架作为角度时，它开始操纵元素及其事件。 Jquery不能像您习惯的那样工作，因为如果您只在页面末尾输入一次脚本，事件将应用于当前元素，但在角度进行任何修改后，事件将不再起作用。 / p>

不建议将Jquery与angular结合使用，但是，如果您想利用某些特定角度插件中尚未找到的功能，可以创建一个角度组件来进行绑定，这样您就可以了通过应用你想要的Elements来进行jquery调用，显然理想的是你也可以为某些类型的事件执行unbind。

以下是一个示例：Example

混合jQuery和Angular4的不同方式

2 个答案: