如何在 Angular 中向下滚动时使组件消失?

Question

我正在寻找一种简单的方法，以便在向下滚动正常标题时显示不同的标题。 我一直在寻找许多解决方案，但它们都涉及长代码。

所以这是我找到的解决方案，但它不起作用，因为 y 没有实现自己。

这是打字稿

import { Component, OnInit, HostListener } from '@angular/core';`
...
export class HeaderComponent implements OnInit{
y = window.scrollY;
myID = document.getElementById("header");
myID2 = document.getElementById("header2");
ngOnInit() {
this.myScrollFunc();
window.addEventListener("scroll", this.myScrollFunc);
}
myScrollFunc() {
if (this.y >= 150) {
this.myID2.className = "bottomMenu hide"
this.myID.className = "bottomMenu show"
} else {
this.myID2.className = "bottomMenu show"
this.myID.className = "bottomMenu hide"
}
};
}

该目录

<div id="header" class="bottomMenu show"> ... </div>
<div id="header2" class="bottomMenu hide"> ... </div>

还有.css

.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}

这显然应该有效并且看起来很简单，但它对我不起作用。

编辑：如果你有一个更简单的方法，我也开放，解决方案主要不是纠正这个。

编辑 2 ： 仍然没有答案，如果有人有一个想法，或者是否有更简单的解决方案，例如如果(位置 ！=0( { y = 1 } 否则 { y = 0 } 我会在 HTML 中的某个 ngIf 中添加 y... ？

编辑3：我终于找到了一个解决方案，如果有人有同样的问题，这是我的代码：

.HTML

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

打字稿

export class HeaderComponent implements OnInit{
scrolled = 0;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
const numb = window.scrollY;
if (numb >= 50){
this.scrolled = 1;
}
else {
this.scrolled = 0;
}
}
}

比长侦听器更容易

非常感谢您提前的帮助！

Answer 1

HTML

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

打字稿

export class HeaderComponent implements OnInit{
scrolled = 0;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
const numb = window.scrollY;
if (numb >= 50){
this.scrolled = 1;
}
else {
this.scrolled = 0;
}
}
}

比长侦听器更容易

Answer 2

我更新了你的代码试试这个。

import { Component, OnInit, HostListener } from '@angular/core';`
...
export class HeaderComponent implements OnInit{
y = window.scrollY;
myID = document.getElementById("header");
myID2 = document.getElementById("header2");
ngOnInit() {}
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
if (this.y >= 150) {
this.myID2.className = "bottomMenu hide"
this.myID.className = "bottomMenu show"
} else {
this.myID2.className = "bottomMenu show"
this.myID.className = "bottomMenu hide"
}
}
}

Answer 3

如果您正在使用角度并想要隐藏某些元素，您应该只使用*ngIF来呈现或不呈现元素，并且无需应用 css 来隐藏它，并且由于您只显示一个元素或另一个元素，您可以将两者绑定到同一个变量，但条件相反。

<div id="header" *ngIf="!scrolled" class="bottomMenu"> ... </div>
<div id="header2" *ngIf="scrolled" class="bottomMenu"> ... </div>

在您的组件中，剩下要做的就是在超过您想要的高度时滚动到打开。

import { Component, OnInit, HostListener } from '@angular/core';`
...
export class HeaderComponent implements OnInit{
scrolled = false;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
this.scrolled = $event.srcElement.scrollTop >= 150;
}
}

编辑：我从upinder kumar答案中添加了HostListener，因为这是注册角度事件的正确方法。

编辑 2 ：我过去已经实现了与此类似的东西，但没有使用硬编码的 px(在您的情况下您使用 150 px(大小来滚动事件，但我计算出我的标题会在滚动 10% 后发生变化使用以下表达式：

this.scrolled = $event.srcElement.scrollTop / $event.srcElement.scrollHeight > 0.1 ;

Answer 4

不幸的是，使用@HostListener('window:scroll')对我不起作用。对于现代浏览器，您可以改用wheel事件 (WheelEvent(。

我获取整个应用程序的滚动并在组件之间共享，以便我可以对事件执行任何我想做的事情。

share.service.ts

public isScrolledUp = new BehaviorSubject<boolean>(null);
public addScroll(isScroll: boolean) {
this.isScrolledUp.next(isScroll);
}

app.component.ts

constructor(private sharedS: SharedService){}
public onScroll(event: WheelEvent) {
// Move Up (negative)
// Move Down (positive)
this.sharedS.addScroll(event.deltaY > 0);
}

app.component.html

<div (wheel)="onScroll($event)">
<!--Here goes your components-->
<router-outlet></router-outlet>
</div>

然后，您喜欢的任何组件只需导入SharedService并订阅属性即可。

any.component.ts

private sub: Subscription;
public isScrollUp: boolean; // you can do whatever you want. Ex: hide some buttons
constructor(private sharedS: SharedService){}
ngOnInit(): void {
this.sub = this.sharedS.isScrolledUp.subscribe((res) => this.isScrollUp = res);
}

any.component.html

<footer *ngIf="!isScrollUp"></footer>
<button *ngIf="isScrollUp"></button>