小编Chr*_*ton的帖子

我写了一个如下所示的组件：

'use client'

export const HorizontalModule = (props: any) => {
    ...

    return (
        {scrollPosition >= 0 && (
            <FirstModule />
          )}

          {scrollPosition >= window.innerHeight * 2 && (
            <SecondModule />
          )}        
    )
})

但我收到“窗口未定义”错误。

阅读不同的帖子，我发现大多数人发现使用动态导入很有用，所以我在父组件（即 nextjs 页面）中执行此操作：

const HorizontalModule = dynamic<any>(
  () => import('./HorizontalModule/HorizontalModule').then((mod) => mod.HorizontalModule),
  {
    ssr: false,
    suspense: true,
    loading: () => <p>Loading...</p>
  }
)

起初我收到此错误：“对象不是函数”

现在我收到“不支持的服务器组件类型：未定义”

我不完全知道我做了什么来切换错误，但它仍然不起作用。

我必须提到，我在 Horizo​​ntalModule 代码中使用了窗口对象，但当useEffects我在渲染函数中使用它时，所有的都停止工作。

我还尝试在组件内部编写如下验证：

if (window === undefined) return (<></>)
return (...)

我得到了相同的窗口未定义对象或水合错误。

我不知道还有什么可做的，ssr false不起作用，悬念也，窗口条件......

我是角度新手。@abacritt/angularx-social-login 中的 Google 按钮只是一个图标，我想通过将图标放置在 div 中并在其旁边写上“使用 Google 登录”来更改其外观。我只需单击图标即可通过 Google 进行身份验证，但我无法理解如何通过单击其外部 div 以编程方式单击它。我一直在尝试 ViewChild 但没有成功。@abacritt/angularx-social-login 包附带了该<asl-google-signin-button></asl-google-signin-button>元素，该元素在屏幕上显示图标。单击时，此元素将启动 Google 身份验证。

这是我的相关代码文件：

google-signin-button.component.html

<div (click)="clickGoogleBtn()" class="google_signin">
    <asl-google-signin-button #googleBtnRef></asl-google-signin-button>
</div>

谷歌登录按钮.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { SocialAuthService, SocialUser } from '@abacritt/angularx-social-login';
import {Router} from '@angular/router';
import { ElementRef } from '@angular/core';


@Component({
  selector: 'app-google-signin-button',
  templateUrl: './google-signin-button.component.html',
  styleUrls: ['./google-signin-button.component.scss']
})
export class GoogleSigninButtonComponent implements OnInit{
  @ViewChild('googleBtnRef')
  googleBtn?: ElementRef;

  user?: SocialUser;

  constructor(
    private router: Router,
    private socialAuthService: SocialAuthService) { }

  ngOnInit(): …