Question

我想使用我的角度构建应用程序

npm run build:ssr

SSR用于服务器端渲染。但是在构建后，当我尝试运行我的项目时，它在标头组件中给出了错误

未定义文档

header.ts

mobileMenu() {
    const mobileMenu = document.querySelector(".mobileHeader");
    mobileMenu.classList.toggle("stickymobile");
    const hambar = document.querySelector(".icon>i");
    mobileMenu.classList.toggle("move");
    const icon = document.querySelector(".icon");
    icon.classList.toggle("open");
  }

 head() {
    const image = document.querySelector(".image>img");
    window.addEventListener("scroll", (e) => {
      const header = document.querySelector(".desktopHeader");
      if (window.pageYOffset > 25) {
        header.classList.add("sticky");
        //@ts-ignore
        image.src = "../../../assets/Logo/Dark logo.svg";
      } else {
        header.classList.remove("sticky");
        //@ts-ignore
        image.src = "../../../assets/Logo/New logo.svg";
      }
    });
  }

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    this.head();
  }

如何解决此错误，请提供帮助

Answer 1

使用服务器端渲染时，需要仔细编写代码。因为当您在服务器中运行代码时，某些事情会改变。其中一些是已实现的浏览器对象，例如Document，window等，以及一些函数，例如SetTimeout和SetInterval。这些对象和功能在服务器中不存在。因此，在服务器中时，您需要避免执行某些代码，这是一个示例

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

  constructor(@Inject(PLATFORM_ID) platformId: Object) {
    this.isPlatFormBrowser = isPlatformBrowser(platformId);
  }



  mobileMenu() {
    if(!this.isPlatFormBrowser) return;
      // now when you are in the server this code does not be executed although in the browser it does
    const mobileMenu = document.querySelector(".mobileHeader");
   //rest of your code here...
  }


  head(){
    if(!this.isPlatFormBrowser) return;
      // now when you are in the server this code does not be executed although in the browser it does
    window.addEventListener("scroll", (e) => {
    //rest of your code here...
  }

未定义角度文档

1 个答案: