相关疑难解决方法(0)

我在尝试创建将keyup事件转换为可观察流时遇到问题.

我正在关注Ng-book版本6.我陷入了一个在您输入时搜索YouTube视频的示例.当搜索返回时,我们将显示视频缩略图结果列表,以及每个视频的说明和链接.

所以为此,我们使用了一个observable.fromEvent:https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you-tube-search /search-box.component.ts

在RxJS 5中,它提供了一种使用Rx.Observable.fromEvent侦听元素上的事件的方法.

ngOnInit(): void {
// convert the `keyup` event into an observable stream
Observable.fromEvent(this.el.nativeElement, 'keyup')

但是我收到了这个错误:

src/app/search-box/search-box.component.ts(42,13)中的错误:错误TS2339:类型'typeof Observable'上不存在属性'fromEvent'.

我RxJS 6 Observable和fromEvent的导入是这样的:

import { Observable, fromEvent } from 'rxjs';

这是我在Angular 6中的RxJs5版本的代码:(它不起作用)

Observable.fromEvent(this.el.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
.debounceTime(250) // only once every 250ms 
.do(() => this.loading.emit(true)) // enable loading
      // search, discarding old …

滚动后我有问题修复标题,我尝试了很多东西,但无法让它工作.我检查了这个帖子,但它对我不起作用:Angular 4 @HostListener窗口滚动事件奇怪地在Firefox中不起作用.这是我的组件结构:

• 布局
  • 脚步
• 路线

在滚动50px之后,内部步骤是我要修复的标题.内部布局是一些其他内容,如带有徽标背景的div(在步骤的内容之上).

这是我在Steps.ts中尝试的内容

@HostListener('window:scroll', [])
  onWindowScroll() {
    const number = window.scrollY;
    if (number > 40) {
      this.fixed = true;
    } else if (this.fixed && number < 10) {
      this.fixed = false;
    }
  }

但问题是滚动根本没有触发.我找到了 滚动记录事件的示例,但对我来说它不起作用(我尝试使用$ event).有人有解决方案吗？

我正在尝试在滚动时在屏幕顶部保留一个div.

我找到了几个关于它的指南和SO问题,但它对我不起作用.

我使用过这些:

• angular2滚动然后固定标头在bootstrap整页模态问题
• http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/
• 角度2改变位置固定在滚动上
• Angular 4 @HostListener窗口滚动事件奇怪地在Firefox中不起作用

这就是我到目前为止所做的事情:

零件 :

import {DOCUMENT} from '@angular/platform-browser';
@Component({
    selector: 'example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
    public fixed: boolean = false;
    constructor( @Inject(DOCUMENT) private doc: Document) {}
    ngOnInit(): void {
        this.onWindowScroll();
    }
    @HostListener('window:scroll', [])
    onWindowScroll() {
        let number = window.pageYOffset || document.documentElement.scrollTop || window.scrollY || 0;
        if (number > 100) {
            this.fixed = true;
        } else if (this.fixed && number < 10) {
            this.fixed = false; …

是否可以在简单的服务而不是组件或指令代码中使用 Angular @HostListener('window:scroll',) ？

我不想污染我的任何组件，因为滚动的意识应该注入到其他几个服务中......目前我有以下可以编译的代码，但无法以某种方式工作。

import { Component, OnInit, Injectable, Inject, HostListener } from '@angular/core';
import { SearchService } from './search.service';
import { DOCUMENT } from '@angular/platform-browser';

const scrollStepToReload = 3700;

@Injectable()
export class ScrollWatcherService {

  private maxReachedScroll = 0;
  private lastLoadedAt = 0;

  constructor(private searchService: SearchService, @Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll', ['$event'])
  onScroll($event) {

    const scrollOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    console.debug("Scroll Event", scrollOffset);

    if (scrollOffset > this.maxReachedScroll) {
      this.maxReachedScroll = scrollOffset;
    }
    if …

我的侧边栏导航组件sidebar.component.html是这样的：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
  <a class="navbar-brand" href="#page-top">
    <span class="d-block d-lg-none">Sujoy Debnath</span>
    <span class="d-none d-lg-block">
      <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg"             alt="">
    </span>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-   target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/education">Education</a>
      </li>
    </ul>
  </div>
</nav>

import { Component, OnInit } from '@angular/core'; …