相关疑难解决方法(0)

动态添加事件侦听器

我刚刚开始乱用Angular 2,我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法.

我有一个组件设置.当单击模板中的某个元素时,我想为mousemove同一模板的另一个元素添加一个监听器.然后,我想在单击第三个元素时删除此侦听器.

我有点使用普通的Javascript来抓取元素,然后调用标准,addEventListener()但我想知道是否有更多的" Angular2.0 "方式,我应该调查.

angular

134
推荐指数
3
解决办法
13万
查看次数

如何在Angular2中实现拖放?

我想使用Angular 2实现拖放.我有一些项目:

<div class="item"></div>
Run Code Online (Sandbox Code Playgroud)

我希望能够在容器中拖放:

<div class="container"></div>
Run Code Online (Sandbox Code Playgroud)

我在Angular 2中找不到任何好的信息来源.我找到了这个文件:https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts我尝试但我无法让它工作,我也不完全确定它应该如何工作.

我该如何实现它?

angular

11
推荐指数
4
解决办法
4万
查看次数

RxJs如何处理文档事件

开始使用RxJs.无法找到解决这个问题的方法.我有一个可拖动的控件:

startDrag = rx.Observable.fromEvent(myElem,'mousedown')
Run Code Online (Sandbox Code Playgroud)

现在,因为控件太小mousemove而且mouseup事件应该在文档级别(否则它将不会停止拖动,除非光标正好在元素上)

endDrag = rx.Observable.fromEvent document,'mouseup'

position = startDrag.flatMap ->
   rx.Observable.fromEvent document,'mousemove'
   .map (x)-> x.clientX
   .takeUntil endDrag
Run Code Online (Sandbox Code Playgroud)

现在,当我不再被拖动时,我如何"抓住"正确的时刻(mouseup).你看到订阅的问题endDrag?每次点击任何地方都会触发,而不仅仅是myElem 如何一次检查所有3个属性?它应该只采取那些完全发生在startDrag和之后的document.mouseupsposition

Upd:我的意思是问题不在于移动元素.那部分很容易 - 订阅position,更改元素的CSS.我的问题是 - 我需要检测时刻mouseup并知道被拖动的确切元素(页面上有多个元素).怎么做我不知道.

javascript rxjs

5
推荐指数
1
解决办法
4762
查看次数

Plunker给了我几天前工作的脚本404

几个星期前我做了一个龙头,一切都进展顺利.

然而今天当我再次访问它时,我的脚本会被404s轰炸,对于改变了什么有任何想法?

http://plnkr.co/edit/M2hRaf?p=preview

Chrome控制台输出 这是index.html的样子

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
      Loading...
    </my-app>
  </body>

</html>
Run Code Online (Sandbox Code Playgroud)

javascript jsx plunker angular

3
推荐指数
1
解决办法
729
查看次数

标签 统计

angular ×3

javascript ×2

jsx ×1

plunker ×1

rxjs ×1