如何在 Angular 5 中添加规范链接

如何在 Angular 5 中动态添加规范链接

<link rel="canonical" href="http://foobar.com/gotcah"/>

面对同样的问题，我四处搜索并找到了有关如何执行此操作的指南：

https://www.concretepage.com/angular/angular-title-service-and-canonical-url https://www.concretepage.com/angular/angular-title-service-and-canonical-url

虽然它使用 Angular 6，但我认为它向后兼容 5。

它基本上建议创建一个服务（SEO 服务），以便于在注入的任何地方创建规范链接。它注入了 AngularDOCUMENT对象到服务中，并创建规范链接元素作为HTMLLinkElement.

它需要注意的是，该解决方案是预渲染/服务器端渲染友好的 - 因此，如果您希望更好地控制应用程序中页面的 SEO，我相信这就是您想要的。

以下是文章中服务的最小重写：

seo服务.ts

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class SeoService { 
   
  constructor(@Inject(DOCUMENT) private doc) {}
  
  createLinkForCanonicalURL() {
     let link: HTMLLinkElement = this.doc.createElement('link');
     link.setAttribute('rel', 'canonical');
     this.doc.head.appendChild(link);
     link.setAttribute('href', this.doc.URL);
   }
} 

这是使用该服务的组件的重写：

数据组件.ts

import { Component, OnInit } from '@angular/core';
import { SeoService } from './seo.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {
  
  constructor(private seoService: SeoService) { }
  
  ngOnInit() {
    this.createLinkForCanonicalURL();
  }
  
  createLinkForCanonicalURL() {
    this.seoService.createLinkForCanonicalURL();
  } 
}

你可以简单地拥有createLinkForCanonicalURL()方法采用您希望作为页面规范引用的 URL 的可选参数，以实现完全控制。