Angular Universal：捕获滚动或调整大小事件

Question

有人可以举一个捕捉滚动事件的例子给我吗？我在第一阶段尝试过

this.Window.nativeWindow.addEventListener('scroll', this.OnScroll, true);

但是它不起作用，并且nativeWindow是在server.ts中定义并导入的。在第二阶段，我尝试使用HostListener：

@HostListener("window:scroll", [])
onWindowScroll() 
{
    console.log('window:scroll');
}

没什么。我应该如何在Angular Universal中捕获滚动事件？

这是我的package.json：

{
  "name": "gvh",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng build --prod --source-map",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sme": "source-map-explorer",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run gvh:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/platform-server": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@nguniversal/express-engine": "^8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "domino": "^2.1.3",
    "express": "^4.15.2",
    "rxjs": "~6.4.0",
    "source-map-explorer": "^2.1.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.4",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-cli": "^3.1.0"
  }
}

这里是WindowService：

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

function getWindow(): any 
{
    return window;
}

@Injectable({
    providedIn: 'root',
})
export class WindowService 
{
    get nativeWindow(): Window 
    {
        return getWindow();
    }
}

Answer 1

这是我在项目中使用的代码，效果很好

@HostListener('window:scroll', ['$event'])
onscroll() {
    // your code here
  }

的package.json

{
  "name": "vplay",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build && ng run vplay:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^6.1.6",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/pwa": "^0.8.5",
    "@angular/router": "^6.0.3",
    "@angular/service-worker": "^6.0.3",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@videojs/http-streaming": "^1.2.5",
    "angular-in-memory-web-api": "^0.6.0",
    "angularx-social-login": "^1.2.2",
    "classlist.js": "1.1.20150312",
    "core-js": "^2.5.4",
    "credit-card-space": "^1.4.2",
    "crypto-js": "^3.1.9-1",
    "disable-scroll": "^0.4.0",
    "hammerjs": "^2.0.8",
    "hide-virtual-keyboard": "^1.0.1",
    "jquery": "^3.3.1",
    "jsdom": "^12.2.0",
    "ng-connection-service": "^1.0.4",
    "ng-recaptcha": "^4.0.0-beta.1",
    "ng2-datepicker": "^3.1.1",
    "ng2-tel-input": "^1.0.15",
    "ngx-cacheable": "^1.0.7",
    "ngx-image-cropper": "^1.0.1",
    "ngx-lazy-load-images": "^1.3.1",
    "ngx-owl-carousel": "^2.0.7",
    "ngx-store": "^2.0.0",
    "ngx-toastr": "^8.9.1",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.3.1",
    "videojs": "^1.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.4",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@angular/platform-server": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "~4.2.1",
    "husky": "^1.0.0-rc.13",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "localstorage-polyfill": "^1.0.1",
    "lodash": "^4.17.11",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "^5.4.2",
    "ts-loader": "^4.2.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "webpack-cli": "^2.0.14"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

server.ts

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

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


import 'localstorage-polyfill';

global['localStorage'] = localStorage;
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();