使用 Angular Universal 时客户端渲染一些组件

Question

我的大部分网站都使用 Angular Universal，这样我就可以为 SEO 预呈现内容。它应该是面向 public 的网站。

我希望能够使某些组件仅在客户端呈现，以避免捆绑内容（例如电子邮件地址和社交媒体链接）被网络爬虫发现。

我使用 Angular 通用生成的应用程序来创建我的应用程序。目前，我所有的组件都在服务器端呈现。我找不到任何具体明确的例子，有人以优雅的方式使用 Angular 来实现这个特定目标。我的意图是让我的联系信息和社交媒体链接组件完全在客户端呈现并在运行时添加到 DOM 以避免机器人和网络爬虫看到它。

其他人如何在不做一些骇人听闻的情况下实现这一目标？

Answer 1

您可以为 Angular 使用 isPlatformBrowser 辅助方法并将所有代码包装在该辅助方法中，如下所示：

import { isPlatformBrowser } from '@angular/common';


export class Component {
   constructor(
     @Inject(PLATFORM_ID) private platformId: string,
   ){}

   get isBrowserOnly(): boolean {
      return isPlatformBrowser(this.platformId);
   }
}


<div *ngIf="isBrowserOnly">
  will be shown only in the browser
</div>


```

使用 Angular Universal 时客户端渲染一些组件

Client-side render some components when using Angular Universal

seo

privacy

server-side-rendering

angular-universal

angular