这个问题通常出现在使用Angular Universal时,由于服务端渲染时组件内部的订阅(subscribe)并不会被执行,导致在服务器端获取相关元素出现undefined,从而导致报错。
解决这个问题的一种方法是使用isPlatformBrowser判断当前运行环境是否在浏览器端,只有在浏览器端才执行订阅操作。示例如下:
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common';
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit { constructor( @Inject(PLATFORM_ID) private platformId: Object, // ... ) { }
ngOnInit() { if (isPlatformBrowser(this.platformId)) { // 在浏览器端执行订阅操作 // ... } } }
通过这种方式判断订阅操作执行的环境,避免了在服务端出现无法读取未定义属性的错误。