在angular 8中无限滚动按钮
在Angular 8中实现无限滚动按钮可以通过使用Angular Material库中的MatButton组件和RxJS库中的滚动事件来实现。
首先，确保已经安装了Angular Material库和RxJS库。可以通过以下命令进行安装：
npm install @angular/material @angular/cdk rxjs接下来，在需要使用无限滚动按钮的组件中，导入所需的模块和服务：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';然后，在组件类中定义一个ViewChild装饰器来获取按钮元素的引用：
@ViewChild('scrollButton', { static: true }) scrollButton: ElementRef;接着，在ngOnInit生命周期钩子中，使用fromEvent函数来监听滚动事件，并根据滚动位置来控制按钮的显示与隐藏：
ngOnInit() {
const scroll$ = fromEvent(window, 'scroll').pipe(
throttleTime(200), // 设置滚动事件的节流时间
map(() => window.pageYOffset) // 获取滚动位置
);
scroll$.subscribe((scrollPosition) => {
if (scrollPosition > 500) {
this.scrollButton.nativeElement.style.display = 'block';
} else {
this.scrollButton.nativeElement.style.display = 'none';
}
});
}最后，在组件的HTML模板中，使用MatButton组件和ViewChild获取到的按钮引用来实现无限滚动按钮：
<button mat-raised-button #scrollButton (click)="scrollToTop()">回到顶部</button>在组件类中，还可以定义一个scrollToTop方法来实现点击按钮后回到页面顶部的功能：
scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}这样，当页面滚动位置超过500像素时，按钮会显示出来，点击按钮后页面会平滑滚动回到顶部。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景，具有高性能、高可靠性和高安全性。了解更多信息，请访问腾讯云云服务器（CVM）产品介绍。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问腾讯云对象存储（COS）产品介绍。
相关·内容
1回答
从angular 4中的另一个组件访问另一个组件
javascript、angular
我需要在app.module.ts中滚动来自另一个产品组件的标记
app.module.ts
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<nav-header></nav-header>
<main class="mdl-layout__content" #scrollMe>
<router-outlet></router-outlet>
<
浏览 24提问于2018-03-02得票数 0
回答已采纳
1回答
rxjs pairwise正在发出重复的值
angular、rxjs、pairwise
我正在尝试创建两个滚动事件，无论是垂直滚动方向还是水平滚动方向都可以观察到。 我尝试使用pairwise()和bufferCount(2,1)操作符从水平滚动事件中筛选垂直滚动事件，但问题是获取prev.scrollTop和curr.scrollTop的重复值 import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { pairwise, tap, filter } from
浏览 12提问于2019-06-11得票数 2
回答已采纳
2回答
debounceTime到CodeMirror角
javascript、angular、typescript、rxjs、codemirror
我已经尝试了多个变体，也是在之后
使用ng2-codemirror 1.1.3库+ codemirror 5.33.0锚点
我所要做的就是将一个DebounceTime操作符附加到CodeMirror编辑器的change事件中
html：
<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>
ts：
import { Observable } from
浏览 0提问于2018-01-31得票数 3
回答已采纳
2回答
使用离子-无限-滚动开始在底部。
javascript、angular、typescript、ionic-framework、angular7
我正在制作一个消息提要，我希望我的用户能够滚动起来查看他们的消息。
我现在可以滚动(即使它在新的消息加载后跳转)，但是我的页面从视图的顶部开始。
第一条消息位于视图的全部底部，我希望我的用户看到他们的最后一条消息。然而，无限滚动从顶部开始。
messaging-interface.page.html
<ion-header>
<custom-toolbar class="menu-bar" [title]=chatRoomType>
<ion-buttons slot="start">
<ion-
浏览 0提问于2019-06-11得票数 0
2回答
尝试在Ionic 3中使用switchMap取消现有的http请求
angular、rxjs、ionic3、switchmap
我的目标是在Ionic 3项目中使用RxJs switchMap，在服务器离线时取消任何正在进行的登录尝试，并且只使用最新的请求。否则，我可以得到一些不必要的异步副作用以后。
在我的视图层中，我使用submitStream$捕获按钮单击流，然后将它作为方法参数传递给服务层。在服务层，我通过一个response$创建switchMap，将传递的参数submitStream$与从this.webServiceUtil.testLogin()返回的Observable<Response>组合在一起。
我试着实现这个代码：
HTML标记
<button #submit type=&#
浏览 3提问于2017-09-01得票数 0
回答已采纳
1回答
如果使用滚动条=不触发滚动事件(angular2)
angular、events、iframe、scroll
我有一个angular2应用程序，它有一个头，内容在一个iframe中。我禁用了css文件中的窗口滚动条，其中包含: html {overflow:隐含；}，我的目标是用动画实现一个粘性的标题。
我尝试了一些选项，但在我看来，它们中没有一个在燃烧/聆听iframe的滚动事件(窗口或剂量滚动事件没有问题，但我不需要它)：
选项1(当我尝试(加载)而不是(滚动)时，它可以工作)：
<iframe src=".." scrolling="yes" (scroll)="iframeScrollHandler(event)">..</if
浏览 2提问于2017-01-02得票数 0
1回答
基于窗口大小角度2+的动态省略文本
angular、angular5、angular6
因此，我有一个包含各种大小的div的图表(如甘特图)，其中有如下文本
<div #arrowWrap
[routerLink]="data.link"
class="chart-item block-arrow"
[ngClass]="{
'disabled' : data.disabled,
'enabled' : !data.disabled
}">
<p #arrowText *ngIf="!squished">{{data
浏览 2提问于2018-06-06得票数 1
1回答
httpClient角度到PHP数据发送问题
php、angular、angular-httpclient
我有一个小项目要做，在这个项目中，一些用户可以将一些数据输入到文本框中，然后将其发送到php服务器，我以前在让它工作时并没有使用角，但现在我试图将角和php一起使用。
我的问题是，一旦我单击“提交”发送到.txt文件的数据，要么使用$_POST打印‘数组’，要么不使用$_HTTP_RAW_POST_DATA打印‘数组’。
app.component.ts：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angul
浏览 1提问于2018-06-07得票数 2
回答已采纳
7回答
角4-当div进入视口时如何触发动画？
angular、animation、scroll、visible
我一直在构建一个新的网站使用角4，我正在尝试重新创造一个效果，当一个div变得可见(当你滚动屏幕)，然后可以触发一个角动画，以幻灯片的div在侧面。
在过去，我可以使用角4之外的jQuery来实现这一点，但是我想尝试使用本机的角4动画来创造同样的效果。
当一个div进入视图时，有人能给我提供如何触发动画的建议吗？(也就是说，当div进入viewport时，滚动到页面的较低的部分)。我已经编写了幻灯片动画，但是我不知道当div在以后的某个日期显示到视图端口时，如何用滚动来触发它。
谢谢大家！
浏览 3提问于2017-04-23得票数 16
回答已采纳
1回答
如何在同级组件中单击(或更改)上执行多个函数？
angular、typescript
我是新的角，我正在开发一个基本的应用程序。我有几个兄弟姐妹，按钮在其中之一。通过单击按钮，我必须触发其他组件中的几个函数。(单击按钮可以填充数组中的数据，因此，当数组发生更改时，可能会触发函数。)这是如何做到的？
我试过：@Input-@Output、EventEmmiters、Services、Observables和Subscription、@Viewchild和no succeed...The数据在组件之间移动，但没有调用函数。那么还有其他的想法吗？(或者是我尝试过的一个例子，也许我做错了什么)
服务：
import { Injectable, Input } from '@an
浏览 4提问于2019-11-11得票数 0
回答已采纳
1回答
HostListner使页面滚动无响应
javascript、angular、scroll
Angular版本: 6.0.0
Cli : 6.0.0
我已经使用下面的HostListener来显示滚动到顶部按钮，如果页面滚动超过500px，反之亦然。
isSectionFixed : boolean = false;
@HostListener('window:scroll', ['$event.target'])
onWindowScroll(event) {
let number = window.pageYOffset || 0;
if (number > 500) {
this.isSectionFixe
浏览 0提问于2019-01-16得票数 1
2回答
表搜索过滤器不工作，角度10
angular、typescript
我正在开发一个users模块，它具有一个用于管理目的的users视图。我可以看到我的数据，所以它工作得很好，但我不理解搜索过滤器是如何工作的。以下是我的代码。我是typeScript和Angular的新手，所以我使用了网上的例子，但失败了。嘘！无论如何，我在搜索过滤器中输入，什么也没有发生。 users.component.ts import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
im
浏览 25提问于2020-12-28得票数 1
4回答
跟踪滚动位置并通知其他组件
angular、typescript、events、scroll
是否有一种简单的方法可以跟踪浏览器滚动位置并通知多个组件？
用例:在卷轴上，我希望能够根据我所处的位置更改页面上各种元素的类。在以前版本的角，它是有点可能通过一个插件(同样的jQuery)。当然，可以选择编写裸露的JS来在应用程序启动和发出事件时初始化它，但是这听起来很脏，对于这种类型的事情来说，事件发射是相当昂贵的。
我在这里有什么选择？
更新(建议后)：
以下是我尝试过的：
我创建了一个组件：
import {Component} from "angular2/core";
@Component({
selector: '[track-scroll]&#
浏览 10提问于2016-04-07得票数 68
回答已采纳
2回答
无法更新angular组件中jquery事件中模型属性更改的视图
jquery、angular
我在更新视图时遇到了一些有线问题。 场景： 我在angular组件的oninit上声明了jquery按钮点击事件。在单击事件时，我正在更新视图上的模型值和绑定，但当我单击按钮时，它不会在视图中更新。如果我在angular click event(create)中使用了same，它会在视图中显示更新值。 不确定这里出了什么问题。 import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as $ from &#
浏览 22提问于2020-06-21得票数 1
回答已采纳
2回答
在angular2上使用按钮进行水平滚动
html、css、angular、typescript
因此，我在angular2中有一个应用程序，我需要水平滚动组件，但需要使用向右和向左的按钮。所以我需要为每个向右或向左滚动到内容的按钮的功能。我需要这样的东西：
我尝试使用document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }，但Angular无法识别animate行。
因此，我正在寻找一种不同的方式水平滚动使用按钮，而不是使用jquery。在angular中有什么方法可以做到这一点吗？
这是我的html
<div class=
浏览 18提问于2018-02-24得票数 13
回答已采纳
1回答
如何在绑定到API响应的角材料表中添加分页
angular、pagination、angular-material
我对角质还不熟悉。在我的项目中，显示了正确的产品列表及其工作。
我的HTML代码如下：
<table mat-table [dataSource]="list_product" style="width: 20%;">
<!-- id Column -->
<ng-container matColumnDef="id" style="width: 20%;">
<th mat-header-cell *matHeaderCellDef style="
浏览 3提问于2021-03-28得票数 3
回答已采纳
2回答
我的模板引用变量.nativeElement未定义
angular、typescript、angular-template
是没有定义的，我不知道为什么。我做错了什么？谢谢。这是我的
app.component.ts：
import { Component,ElementRef,ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
switchDir
浏览 0提问于2018-07-05得票数 5
回答已采纳
1回答
用角2中的可观测值改变分量的性质
angular、typescript、angular2-services
我有两个共享服务的组件，第一个组件有2个按钮，在单击squeezeContent()和unsqueezeContent()时触发2个方法，这些方法将一个数字值传递给服务中的可观测值，然后从共享相同服务的另一个组件中的属性中减除该值，我一直在试图使用可观察的，但我做得不对。
第一组件
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { CrosspropertiesService } from "../services/crossproperti
浏览 2提问于2017-04-23得票数 0
1回答
离子v5卷轴到顶部
angular、typescript、ionic-framework、ionic5
Current environment:
Ionic CLI : 6.7.0
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
关于离子v5的
浏览 1提问于2020-05-20得票数 2
回答已采纳
2回答
如何为角物质表中的每一行创建click ()事件的可观测值并对所有这些事件作出响应？
javascript、angular、typescript、rxjs、angular-material
我能够用一个HTML按钮和一个角材质按钮来完成它，但是在一个角度材料表中，我只能在第一行中成功地做到这一点，首先使用fromEvent创建可观测值，在没有得到所需结果的情况下发出事件单击，然后用Renderer2尝试它，我不可能找到能够订阅表中发出的每个clik ()事件的方法，无论是使用merge with @ViewChildren ()，我都无法在中的角材料DOM事件表中完成。
//ts
import { Renderer2,AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from &#
浏览 4提问于2021-12-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
