как добавить каноническую ссылку в angular 5

Question

как добавить каноническую ссылку в angular 5

Как добавить каноническую ссылку в angular 5 динамически

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

739 2

angular meta-tags canonical-link

2 ответов:

Comments

Ничего не найдено.

Andreas Lorenzen · Accepted Answer · 2018-06-13 01:32:14

Столкнувшись с той же проблемой, я поискал вокруг и нашел руководство о том, как это сделать:

Https://www.concretepage.com/angular/angular-title-service-and-canonical-url
Хотя он использует Angular 6, но я думаю, что он обратно совместим с 5.
Он в основном предлагает создать сервис (SEOService) для облегчения создания канонической ссылки, куда бы она ни была введена. Он вводит объект Angular DOCUMENT в сервис и создает канонический элемент link как 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-адреса, который вы хотели бы использовать в качестве канонической ссылки для страницы, для полного контроля.

sai kiran · Accepted Answer · 2018-06-07 13:30:22

Я нашел решение., создать сервис ссылок (например: link.обслуживание.ts) & вставить следующий код:

import { Injectable, Optional, RendererFactory2, ViewEncapsulation, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class LinkService {

constructor(
    private rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private document
) {
}

/**
 * Inject the State into the bottom of the <head>
 */
addTag(tag: LinkDefinition, forceCreation?: boolean) {

    try {
        const renderer = this.rendererFactory.createRenderer(this.document, {
            id: '-1',
            encapsulation: ViewEncapsulation.None,
            styles: [],
            data: {}
        });

        const link = renderer.createElement('link');
        const head = this.document.head;
        const selector = this._parseSelector(tag);

        if (head === null) {
            throw new Error('<head> not found within DOCUMENT.');
        }

        Object.keys(tag).forEach((prop: string) => {
            return renderer.setAttribute(link, prop, tag[prop]);
        });

        // [TODO]: get them to update the existing one (if it exists) ?
        renderer.appendChild(head, link);

    } catch (e) {
        console.error('Error within linkService : ', e);
    }
}

private _parseSelector(tag: LinkDefinition): string {
    // Possibly re-work this
    const attr: string = tag.rel ? 'rel' : 'hreflang';
    return `${attr}="${tag[attr]}"`;
}
}

 export declare type LinkDefinition = {
  charset?: string;
  crossorigin?: string;
  href?: string;
  hreflang?: string;
  media?: string;
  rel?: string;
  rev?: string;
  sizes?: string;
  target?: string;
  type?: string;
} & {
    [prop: string]: string;
};

Служба импорта в компоненте:

import { LinkService } from '../link.service';

constructor(private linkService: LinkService) {

this.linkService.addTag( { rel: 'canonical', href: 'url here'} );
}

Пожалуйста, смотрите ссылку ниже:

Https://github.com/angular/angular/issues/15776