如何使用 Angular 通用 SSR 和 ngx-seo 插件设置元标记？解释

如何解决如何使用 Angular 通用 SSR 和 ngx-seo 插件设置元标记？解释

在这个例子中，我将解释如何在 Angular Universal SSR 项目中实现由 https://github.com/samvloeberghs/kwerri-oss 创建的 ngx-seo 插件。

使用此实现，您将获得出色的 SEO，因为元标记将设置在服务器上，而不是在客户端。这可以通过将在服务端执行的路由解析器来实现。

开始吧:)

1. 使用 npm i ngx-seo 安装插件

更新：

1.1 在 app.module.ts 文件中导入 BrowserTransferStateModule 2. 在您的路由器文件中，为您想要设置元标记的每个路径实现 Angular 提供的名为 resolve 的属性，如下所示（如有必要，您可以为每个路径设置单独的解析器 ):

{
    path: 'path-of-your-page',loadChildren: () => import('.....import the module of your page....').then(m => m.ModuleName),resolve: { pageData: PageResolver }
}

3. 在项目中的某处创建 page.resolver.ts 文件 - https://angular.io/api/router/Resolve 解析器文件将负责从您的 API 或从 Angular 提供的 TransferState 中检索数据。

4. 导入 import { TransferState,makeStateKey } from '@angular/platform-browser';

5. 装饰你的 page.resolver.ts 类 @Injectable({ providedIn: 'root' })

6. 在 PageResolver 类解析器接口中实现如下： implements Resolve<type of the data that you manipulate>

7. 在 PageResolver 类的构造函数中，像这样注册 TransferState 和 SeoSocialShareService：

constructor(
    private transferState: TransferState,private seoSocialShareService: SeoSocialShareService
  ) { }

8. 在实现的方法中

resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<type of the data that you manipulate> | Promise<any> | any 
// open the resolve method
{

从 Resolve 接口创建一个常量来存储状态键，如下所示：

const stateKey = makeStateKey<type of the data that you manipulate>(state.url);

我选择 state.url 作为 TransferState 的键

现在一切准备就绪，可以开始设置元标记。 我个人的选择是使用 TransferState，因此我不会一直通过访问者会话进行 API 调用。对于不会发生很大变化的内容，此功能很有用，因此您可以减少访问者会话中的 API 调用。

接下来，如果您决定使用 TransferState，则检查是否存在具有特定 stateKey 的状态。 我选择了 RxJs 操作符，这样我就可以点击我的 API 调用管道来设置元标记并将响应保存在传输状态，并将状态数据返回为 Observable。

    // check if that key exist in the transfer state
    if (this.transferState.hasKey(stateKey)) {

      // get the state data from transfer state
      const stateData = this.transferState.get<type of the data that you manipulate>(stateKey,null);

      this.seoSocialShareService.setCanonicalUrl(the domain + state.url);

      const seoData: SeoSocialShareData = {
        author: .....,keywords: .....,title: ......,etc.
      };

      this.seoSocialShareService.setData(seoData);

      // return the state datа as Observable
      return of(stateData);
    }
    else {

      return this.yourService.CallApiEndpoint() // httpClient call
        .pipe(
          tap({
            next: (response) => {

              this.seoSocialShareService.setCanonicalUrl(the domain + state.url);

              const seoData: SeoSocialShareData = {
                author: .....,etc.
              };

              this.seoSocialShareService.setData(seoData);

              // save the response in the TransferState so you can retrieve on the next request
              this.transferState.set(stateKey,response);

            }
          })
        );

    }

} 
// close the resolve method

像这样，我们有将在服务器端执行的解析器，它将在该状态返回给请求者之前设置所有元标记。无论请求是由某些抓取工具还是网站访问者发出，都会执行此流程。

接下来是移动到视图 component.ts 文件并从我们的解析器中检索解析的数据，以便稍后我们可以显示或操作它。

在我们的 component.ts 文件中，我们必须注册 Angular 提供的 ActivatedRoute 类以获取解析的数据，如下所示：

constructor(
    private activatedRouter: ActivatedRoute
  ) { }

现在我们可以在代码中的某处检索这样的解析数据，通常在 ngOnInit(){} 方法中，如下所示： const pageData = this.activatedRouter.snapshot.data.pageData as type of the data that you manipulate; 然后在集成解析器之前删除 component.ts 文件中的所有 API 调用。 解析器将获取数据并将其传输到您的组件视图。

通过这个，我们已经在我们的 Angular Universal SSR 应用中完全集成了 seo 元标记。

您可以在此处测试您的集成https://developers.facebook.com/tools/debug

快乐编码:)