热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

探讨JavaScriptScale函数在Angular2中的比例应用与优化策略

Scale proportionally with Angular2我需要在 Angular2 应用程序中实现一个保留缩放比例的部分(例如将 youtube 视


Scale proportionally with Angular2


我需要在 Angular2 应用程序中实现一个保留缩放比例的部分(例如将 youtube 视频嵌入网站时)。我不能使用 iframe,因为它会使传递数据变得非常复杂。

这是一个使用 jQuery 解决方案的示例:

https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript/

在 codepen 中,缩小外框将显示所需的功能:

https://codepen.io/chriscoyier/pen/VvRoWy










1
2
3
4
5



// from original article:
var scale = Math.min(

  availableWidth / contentWidth,

  availableHeight / contentHeight
);


在 Angular2 中是否有比在 jQuery 中混合更好的方法呢?我看到了一些库,但遗憾的是没有演示功能。欢迎任何建议。谢谢



相关讨论




  • 也许这是一个有用的想法,但您已经尝试使用视口单位(vh 和 vw)?


  • 我实际上已经对这种技术如何工作进行了很多思考(但从未想出一个好主意)。虽然这看起来很有趣:hackernoon.com/ 但我想知道它是否被认为是最佳实践,我想只要断点在不同的设备上正确显示,那么应该没有问题吗?






我已经将 jQuery 解决方案 (https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript) 中的代码"翻译"到了 Angular。

查看这个堆栈闪电战:https://stackblitz.com/edit/angular-vagpoq。我还在代码中包含了带有解释的注释。



相关讨论




  • 哇看起来很棒!我在尝试实施到我的应用程序时遇到的唯一问题是 cannot read property nativeElement of undefined。我想这可能与此有关:stackoverflow.com/a/43384002/1624933,但即使使用长超时和 ngAfterViewInit 生命周期,它仍然无法识别它!我还不得不将 window.Math 更改为只是 Math 因为它说 Math 在类型窗口上不存在


  • 感谢您的积极反馈。你能分享一下你的代码堆栈闪电战吗?让我们一起经历


  • 嗨,感谢您的帮助,不幸的是,我无法使用我的示例进行此操作,由于嵌套组件,它变得非常复杂,但导致了一些关于生命周期和 ViewChild 的有趣阅读,而不是 ViewChildren。我的朋友设法让它使用未针对 Angular 进行修改的原始代码。但是,您的解决方案确实适用于更简单的集成,因此我已将其作为公认的答案。再次感谢


  • @timhc22 感谢您的积极反馈。令人耳目一新。不过我很好奇,你朋友的解决方案是否需要添加 jQuery?


  • 不,他的解决方案并不完整,因为它只在屏幕加载时调整大小(这对我们的需要来说很好)!










推荐阅读
author-avatar
当时桃花恨春风_375
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有