Question

只是想知道如何在Angular 2/4中做到这一点：这可能很容易，但我无法理解。

这是我的代码：

让我解释一下，当我在底部时，我有一个组件可以将我滚动到页面顶部。但即使页面不需要滚动，浮动的div，即小红箭也始终可见。

在Html中：

每个按钮都动态链接到div。所以div在点击按钮时显示

<div *ngFor="let sampledata of SAMPLEDATA; trackBy: trackId">
     <button  (click)="transmitInfo(sampledata ,0)" > </button>
     <div *ngFor="let data of sampledata .data; trackBy: trackId" >
         <button  (click)="transmitInfo(data,1)" > </button>
     </div>
     <!-- This keeps on going -->
</div>

<div>
     <div *ngIf="renderdata === 0"> {{Object Data}}</div>
     <div *ngIf="renderdata === 1">{{Object Data}}</div>
     <div *ngIf="renderdata === 2">{{Object Data}}</div>
</div>

<div id="scroolUpRight">
   <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
</div>

假设当用户点击按钮2或3时，根据点击的按钮显示第2或第3个div，这个div是一个巨大的数据。激活页面后，页面将自动变为可滚动。

在Css中：

#scroolUpRight {
    position: fixed;
    bottom: 4%;
    right: 2%;
}

#scroolUpRight :hover {
    cursor: pointer;
}

在我的组件中，我将此带到页面顶部：

ngOnInit() {
  this.renderdata = 0;
}

transmitInfo(data, type): void {
        if (type === 1) { this.sampleData = data; this.renderdata = 1; }
        if (type === 2) { this.dataData = data; this. renderdata = 2; }
    }

scrollToTop() {
    return window.scrollTo(0, 0);
}

现在我不知道这是否有效，但我这样做了：

toogleScroolButton(): void {
        if (window.screenY > 300 ) {
            console.log('window length is 300 +');
        }
}

但这是一个功能。如何创建一个自动检测页面何时可滚动的功能或组件并显示此div，在不可滚动时隐藏它。

预期结果：一旦人开始滚动，就会使此div可见。

以前的知识：

之前我使用过Javascript和Jquery来做同样的事情。但我该如何使用   角度为2,4或更高？我需要这个的原因是为了动画这个div   人开始滚动。

我接受优化上述代码的建议。如果有的话，请告诉我..;）

Answer 1

您可以使用简单的*ngIf绑定方法：

<div *ngIf="scrollButton()">
    Top <button>up button</button>
</div>

scrollButton()方法简单如下：

public scrollButton():boolean {
    return window.screenY > 300;
}

只有在scrollButton()方法返回true时才会呈现div，这样您就可以轻松自定义顶部按钮渲染条件，因为您只需要从中返回boolean。

Answer 2

这项工作。我需要让HostListener让窗口滚动甚至看看我是否可以滚动页面。

window.scrollY给了我滚动页面大小，这有助于我找出是否滚动页面。如果scrollY达到某个数，我可以说我正在向下滚动，即I can trigger an *ngIf to true if I am scrolling bottom else I can make it false。代码如下：）

添加

import { HostListener } from '@angular/core';

export class BlaBlaBla {

    //And this did the trick
    activateGoTop : boolean;

    OnNgInit :: activateGoTop = false /* added Silly Reference please put this in ngOnInit() { --- }*/

    @HostListener('window:scroll',[])
    onWindowScroll() {
         if ( window.scrollY > 100 ) {
            this.activateGoTop = true;
         } else {
            this.activateGoTop = false;
         }
     }
}

在Html中：

//Gets activated when screenY is scrolled for more than 100px

<div id="scroolUpRight" *ngIf="activateGoTop">
      <img src="../../../content/images/scrollup.png" width="50px" height="50px" (click)="scrollToTop()">
 </div>

希望这有助于someOne ..;）

页面变为可滚动时显示“转到顶部”按钮

2 个答案: