所以,我是angular2 +的新手,我有一个用jhipster构建的基本Web应用程序,目前,它基本上只有一个非常简单的组织结构图:
https://github.com/dabeng/ng-orgchart
现在的问题是,当我用鼠标在图表上滚动时,它也会滚动整个页面,如果鼠标悬停在图表上,我希望它仅缩放图表。我该怎么做呢?我尝试扩展正在使用的第三方库,并在滚动事件上添加对“ stopPropagation”的调用,但这似乎并没有解决问题。这是我所拥有的:
import { Directive } from '@angular/core';
import { Host, Self, Optional } from '@angular/core';
import { ɵa as OrgChartContainer } from '@dabeng/ng-orgchart'
@Directive({
selector: '[jhiCustomOrgChart]'
})
export class CustomOrgChartDirective {
constructor(@Host() @Self() @Optional() public hostChart : OrgChartContainer) {
const app = (hostChart as any)._app;
hostChart.zoomHandler = (ev) => {
ev.stopPropagation();
const newScale = 1 + (ev.deltaY > 0 ? -0.2 : 0.2);
hostChart.setChartScale(newScale);
}
}
}
在这里找到我的解决方案:Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
只需要添加
ev.preventDefault()
这就是我需要的!