【发布时间】：2020-01-27 02:38:17
【问题描述】：
谁能给我一个捕捉滚动事件的例子？我在第一阶段尝试过
this.Window.nativeWindow.addEventListener('scroll', this.OnScroll, true);
但它不起作用，并且在 server.ts 中定义并导入了 nativeWindow。 在第二阶段，我尝试了 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"
}
}
这里是窗口服务：
import { Injectable } from '@angular/core';
function getWindow(): any
{
return window;
}
@Injectable({
providedIn: 'root',
})
export class WindowService
{
get nativeWindow(): Window
{
return getWindow();
}
}
发现问题：
【问题讨论】：
标签： angular server-side-rendering universal