Question

我正在使用Angular 5和Material 2，并且我试图在一个被mat-sidenav-container包裹的组件中触发一个scrolllevent，但它没有被运行。

navbar.component.html

<mat-sidenav-container class="sidenav-container" fullscreen>
            <mat-toolbar color="primary">
                    <button mat-button [routerLink] ="['']"><span>Home</span></button>
            </mat-toolbar>

            <div id="mainscroll">
                <router-outlet></router-outlet> 
            </div>
</mat-sidenav-container>

home.component.ts

import { Component, OnInit, AfterViewInit  } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: '',
  templateUrl: './home.component.html'
})
export class HomeComponent implements AfterViewInit {

    ngAfterViewInit() {
        $(window).scroll(function(){
            alert("Test");
        });
        $(window).ready(function() {
            $(window).bind('scroll', function(){
                alert("Test");
            });
        });
    }
}

如果我将div与路由器插座一起移动到mat-sidenav-container之外，则事件可以触发，但是一旦我将它们移动到内部，事件就不会触发，这可能是因为窗口发生了本身不是滚动而是内容。

我尝试使用$(mainscroll).scroll(function(){，但也没有被检测到，我可以在导航栏组件中放置一个(scroll)="myMethod()"，但我需要仅针对主组件而不是其他组件触发滚动事件。

如果我在$(window).ready内放置了console.log或alert，它运行正常，所以我知道没有运行JQuery的问题。

Angular 5在mat-sidenav-container中检测滚动事件

0 个答案: