我刚刚开始乱用Angular 2,我想知道是否有人能告诉我从元素中动态添加和删除事件监听器的最佳方法.
我有一个组件设置.当单击模板中的某个元素时,我想为mousemove同一模板的另一个元素添加一个监听器.然后,我想在单击第三个元素时删除此侦听器.
我有点使用普通的Javascript来抓取元素,然后调用标准,addEventListener()但我想知道是否有更多的" Angular2.0 "方式,我应该调查.
我想使用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我尝试但我无法让它工作,我也不完全确定它应该如何工作.
我该如何实现它?
开始使用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并知道被拖动的确切元素(页面上有多个元素).怎么做我不知道.
几个星期前我做了一个龙头,一切都进展顺利.
然而今天当我再次访问它时,我的脚本会被404s轰炸,对于改变了什么有任何想法?
http://plnkr.co/edit/M2hRaf?p=preview
<!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)