Обновление мета-тегов в angular universal с внешним вызовом API - PullRequest
0 голосов
/ 11 октября 2018

Я провел более 2 месяцев, но не смог найти четкого решения, как поступить с угловым универсалом.Я уже потратил около 6 месяцев на внедрение Angular Universal в проекте, на который у меня не так много времени, и теперь я застрял в этой проблеме.Может ли кто-нибудь помочь мне с этим, так как кажется, что весь мир хочет знать решение для Angular SSR.

Вот мой код (служба метатегов):

import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import {commonMetas} from './meta-data.model';

@Injectable()
export class SeoService {
    public commonMetas = commonMetas;
    constructor(public meta: Meta, public title: Title) {}

    setAutomatically (key = 'none') {
        const detail = this.commonMetas[key];
        /** setting defaults */
        this.setTitle(detail.title);
        this.setAuthor();
        this.setDescription(detail.description);
        this.setKeywords(detail.keyword);
    }
    setFromJson(key: {
        title: any,
        description: any,
        image: any,
        keyword: any,
        author: any
    }) {
        key.title = key.title ? key.title : this.commonMetas['none'].title;
        key.description = key.description ? key.description : this.commonMetas['none'].description;

    }
    setTitle(titleToSet = '') {
        this.title.setTitle(titleToSet);
    }
    setAuthor (nameToSet = '') {
        this.meta.addTag({ name: 'author',   content: 'havemybooks.com'});
    }
    setKeywords (keyword = '') {
        this.meta.addTag({ name: 'keywords', content: keyword});
    }
    }
}

И мой component.ts

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
      this.api.getParticular({id: this.id}).subscribe((response) => {
        this.content = response.blog_data[0];
        this.content.main_image = this.getImage(this.content.main_image);
        this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
        this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
        this.content.name = this.handleName(this.content.name);
        this.seo.setFromJson({
          title: this.content.title,
          image: this.content.main_image,
          description: this.content.blog,
          author: this.content.name,
          keyword: ''
        });
      });
   });
  }

Вот несколько связанных вопросов StackOverflow и проблем GitHub:

Универсальный угловой рендеринг на стороне сервера, метатеги

Обновление метатеги для SEO с использованием угловых универсальных

угловых универсальных + внешний API

https://github.com/fulls1z3/ngx-meta/issues/101

угловых универсальных - метатеги OGне работает с дочерними маршрутами

https://github.com/fulls1z3/ngx-meta/issues/118(I пытался получить помощь от кого-то, кто успешно реализовал, но не получил помощи)

https://github.com/maciejtreder/ng-toolkit/issues/460 (я открылэто)

Список можно продолжать. Я видел ряд обсуждений, которые так и не были завершены.Любой, кто может подсказать, как сделать вызов API перед рендерингом в ng-express.

Я реализовал SSR и использую тег ngx-meta, но, тем не менее, fb crawler показывает метатеги по умолчанию, которые я использовал в теге head.

ОБНОВЛЕНИЕ: я могу обновить источник с помощью опции просмотра источника в chrome, но сканер Facebook и Google показывают метатеги по умолчанию, которые есть по умолчанию.Запустить мой сайт с ним очень сложно, и любая помощь приветствуется.@Brandon мне очень помог, я потратил довольно много времени на реализацию узла с Jade и Nunchucks, но так как angular Universal по умолчанию использует angular-express, поэтому я не смог использовать вышеупомянутые механизмы рендеринга.

Итак, есть ли способ визуализации метатегов с помощью ng express engine.

Как это <title>{{meta.title}}</title>...

1 Ответ

0 голосов
/ 17 мая 2019

Сначала добавьте все необходимые метатеги в файл index.html следующим образом:

index file

Затем обновите метатеги в каждом необходимом компоненте, используйте мета.updateTag (), как показано ниже

component file

Этот работает для меня.

Я пытаюсь создать службу для обновления, но это не сработало,работает только когда мета-обновление добавлено в тот же компонент.

...