typescript Angular 2. 如何检测组件当前是否在视口中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41302373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2. How to detect if component is currently in viewport
提问by Radek
I'd like to detect if the component position. Is currently in a view port and if yes run the trigger which stats an animation on this particular component.
我想检测组件位置。当前在视口中，如果是，则运行触发器，该触发器统计此特定组件上的动画。
I can't find any "angular" way to do it.
我找不到任何“角度”的方法来做到这一点。
Example app( main component) every div is a separate component of app:
示例应用程序（主要组件）每个 div 都是应用程序的一个单独组件：
<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>
So... I'd like to detect when component five is in viewport (present on a screen) and start animate that component.
所以...我想检测组件 5 何时在视口中（出现在屏幕上）并开始为该组件设置动画。
Any ideas?
有任何想法吗？
Thanks
谢谢
回答by adrianmanduc
You could use the ng-in-viewportplugin.
您可以使用ng-in-viewport插件。
HTML:
HTML：
<div id="five" in-viewport (inViewportAction)="action($event)">Something...</div>
Component:
零件：
action(event : any){
if(event.value){
//Do something here (e.g apply CSS class to start the animation)
}
}
Check my detailed answer on a similar question here.
在此处查看我对类似问题的详细回答。
