我知道以前有人问过这个问题,但没有一个解决方案对我有效。
我正在开发Angular-6项目。我正在获取一个名为SectionComponent的组件中的Window-Scroll事件。
html和body标签样式:
html, body {
overflow: auto;
position: relative;
margin: 0;
height: 100%;
}
下面是组件的层次结构,说明如何管理组件。
我的AppComponent:
HTML:
<div id="wrapper">
<router-outlet></router-outlet>
</div>
CSS:
#wrapper {
width: 100vw;
height: 100vh;
position: relative;
overflow: auto;
}
app.component.ts:
@HostListener('window:scroll', [])
onWindowScroll() {
console.log('scroll');
}
AppComponent加载router-outlet标签中名为HomeComponent的组件。此HomeComponent使用is选择器加载SectionComponent。
我的HomeComponent:
HTML:
<div class="home-wrapper">
<div>
<!-- Some content more that window height -->
</div>
<app-section></app-section>
</div>
CSS:
.home-wrapper {
position: relative;
overflow-y: auto;
height: 100%;
}
home.component.ts:
@HostListener('window:scroll', [])
onWindowScroll() {
console.log('scroll');
}
我的SectionComponent
HTML:
<div class="section-wrapper">
<!-- Some content more than window height -->
</div>
CSS:
.section-wrapper {
position: relative;
height: 2241px;
}
section.component.ts:
@HostListener('window:scroll', [])
onWindowScroll() {
console.log('scroll');
}
我只想在SectionComponent中使用Window-Scroll。但没有任何组件触发事件。我做错了什么?
2条答案
按热度按时间u5rb5r591#
在tempalte:
6za6bjd02#
在您的SectionComponent中,在类声明之后使用