Question

我想查找列表中的元素是否在视口内。为此，我想创建一个自定义事件并在其中调用方法。该活动无效。

以下是我的尝试：

component.html

<div #myEl id="myEl_{{item.id}}" (inViewport)="onScreen($event,myEl)" *ngIf="!item.question" class="card panel m-b-" style="height:auto;">

inViewport 是我的自定义事件。

Component.ts

import { Component, OnInit, Input, AfterViewInit, OnDestroy, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit, OnDestroy {
  @Output() inViewport: EventEmitter<any> = new EventEmitter();

 onScreen(event:any,selector) {

    var test = this.getElementOnScreen(selector);
    if (test)
      console.log(selector.id + " IS VISIBLE");
  }
}

现在这个onScreen没有被调用。我可能错过了一些东西。

请指导！

由于

Answer 1

您应该使用组件app-item

的选择器

<app-item #myEl id="myEl_{{item.id}}" (inViewport)="onScreen($event,myEl)" *ngIf="!item.question" class="card panel m-b-" style="height:auto;">

Answer 2

    import { Component, Input, AfterViewInit, EventEmitter, Output} from '@angular/core';

    @Component({
      selector: 'app-item',
      template: '<div #myEl id="myEl_{{item.id}}" *ngIf="!item.question" class="card panel m-b-" style="height:auto;">
',
      styleUrls: ['./item.component.css']
    })
    export class ItemComponent implements AfterViewInit {
      @Output() inViewport: EventEmitter<any> = new EventEmitter();

      ngAfterViewInit() {
         console.log(selector.id + " IS VISIBLE");
         this.inViewport.emit(); 
      }
    }

自定义事件未在Angular中被触发

2 个答案: