我是 Angular 4 的新手,正在尝试寻找一个用于平移缩放的库。 我无法在 npm 上找到任何包。我尝试在我的项目中添加 jquery,然后添加 jquery.panzoom,但是因为 jquery.panzoom 是用 JavaScript 编写的,而我的 Angular 项目是用 TypeScript 编写的,所以 jquery.panzoom 没有@types,所以它不起作用。
我遵循的步骤
1) npm install --save jquery
2) npm install --save @types/jquery
3) 从 'jquery' 导入 * 作为 $;
//till here jquery works fine
$('.sample').click(function () {
alert('div clicked.');
});
3) npm install --save jquery.panzoom
$('#panzoomDiv').panzoom(
{
$zoomIn: $('.zoom-in'),
$zoomOut: $('.zoom-out'),
$zoomRange: $('.zoom-range'),
$reset: $('.reset')
}
);
这里我得到了错误
src/app/app.component.ts (22,22): Property 'panzoom' does not exist on type
'JQuery<HTMLElement>'.
然后经过this , 我补充说
interface JQuery {
panzoom(options: any): any;
}
到我的 typings.d.ts 文件。 现在它确实编译了但是给出了这个运行时错误
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).panzoom is not a function
at AppComponent.webpackJsonp.117.AppComponent.ngOnInit (app.component.ts:22)
at checkAndUpdateDirectiveInline (core.es5.js:10848)
at checkAndUpdateNodeInline (core.es5.js:12349)
at checkAndUpdateNode (core.es5.js:12288)
at debugCheckAndUpdateNode (core.es5.js:13149)
at debugCheckDirectivesFn (core.es5.js:13090)
at Object.eval [as updateDirectives] (AppComponent_Host.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
at checkAndUpdateView (core.es5.js:12255)
at callWithDebugContext (core.es5.js:13475)
有人可以将我重定向到正确的解决方案或不同的缩放库吗?
类似于 this
更新
这个方法试过了,还是不行。
<div style="display:block; padding: 10px;">
<button id="btn-zoom-in-workspace"
class="zoom-out">Zoom Out
</button>
<button id="btn-zoom-null-workspace"
class="reset">Reset
</button>
<button id="btn-zoom-out-workspace"
class="zoom-in">Zoom In
</button>
<input type="number" class="zoom-range">
</div>
<div id="panzoomDiv" #panzoomDiv>
<div>
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('panzoomDiv') panzoomDiv: ElementRef;
ngAfterViewInit(): void {
if (this.panzoomDiv)
$(this.panzoomDiv.nativeElement).panzoom({
$zoomIn: $('.zoom-in'),
$zoomOut: $('.zoom-out'),
$zoomRange: $('.zoom-range'),
$reset: $('.reset')
});
}
}
最佳答案
npm 安装 --save jquery
安装 jquery Panzoom
将这些添加到 angular-cli.json 的脚本数组中
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery.panzoom/dist/jquery.panzoom.min.js"
],
在模板
<div style="display:block; padding: 10px;">
<button id="btn-zoom-in-workspace"
class="zoom-out" #reference>Zoom Out
</button>
<button id="btn-zoom-null-workspace"
class="reset" #reference>Reset
</button>
<button id="btn-zoom-out-workspace"
class="zoom-in" #reference>Zoom In
</button>
<input type="number" class="zoom-range">
</div>
<div id="panzoomDiv" #panzoomDiv>
<div>
在组件中使用这个
declare var $ : any;
@ViewChild('panzoomDiv') panzoomDiv: ElementRef;
//get all the other element references using elementref and use it in function below
ngAfterViewInit(): void {
if (this.panzoomDiv)
$(this.panzoomDiv.nativeElement).panzoom({
$zoomIn: $(#reference),
$zoomOut: $(#reference),
$zoomRange: $(#reference),
$reset: $(#reference)
});
}
关于jquery - Angular 4 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45914424/