enter image description hereenter image description here如何强制我的组件在客户端执行,比如nextjs中的"use client"?

这是我第一次在Angular使用ssr的体验,如果它被禁用,一切正常

推荐答案

在app.component.HTML中,我们可以用下面的布尔值将按钮包装在@if*ngFor中.

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.HTML',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: any) { }
}

HTML

@if(isBrowser) {
    <auth-btn/>
}
/* we can use ngFor also! */
/* <ng-container *ngFor="isBrowser">
    <auth-btn/>
</ng-container> */

Angular相关问答推荐

Angular - Bootstrap 5 Carbon不工作

从Angular 14更新到15个多边形.ts问题

material 对话框中没有合适的注塑

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

带独立零部件的TranslateLoader[Angular 16]

bootstrap 可折叠菜单在单击时未展开.Angular 应用程序

错误TS2531:对象可能为空.论窗体数组控件

ION标签-从子对象中加载页,保留父对象的S内容

等待可观察性完成后再调用下一个

根据环境变量动态加载Angular templateUrl

VS 2022 停留在运行 Angular 应用程序上

JsPDF Autotable 将图像添加到列中出现错误:属性getElementsByTagName不存在

Angular:为什么在 ngAfterContentInit 之后变量未定义?

多个 Mat Paginator 在 Angular 组件中不起作用

为什么 Angular2 (click) 事件没有在

如何在 Angular4 中访问组件的 nativeElement?

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

如何每隔一段时间发出 HTTP 请求?

Angular2延迟加载模块错误'找不到模块'

如何在项目中导入 Angular material?