AngularUniversal：所有DOM交互事件都不起作用
问题描述：
使用 Angular Universal 可能会出现这样的问题：在服务器上处理的页面中，所有 DOM 交互事件都不会起作用。
原因：
Angular Universal 在服务器端执行时，没有 DOM 对象，因此缺失了一些必需的 DOM API。这就导致了在用 Angular Universal 渲染的页面上，无法触发 DOM 交互事件。
解决方案：
- 使用 Renderer2，将需要绑定的事件从 DOM 中转移到组件中：
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'app-my-component',
template: ...
})
export class MyComponent {
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() { this.renderer.listen(this.el.nativeElement, 'click', () => { console.log('clicked'); }); } }
- 对于一些简单的事件，可以直接使用 HostListener 装饰器：
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-my-component',
template: ...
})
export class MyComponent {
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log('clicked');
}
}
通过这两种方法，可以在使用 Angular Universal 渲染时，很好地绑定 DOM 交互事件。