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？
- 不，他的解决方案并不完整，因为它只在屏幕加载时调整大小(这对我们的需要来说很好)！
来源：https://www.codenong.com/58979088/
