Метаданные и заголовок не обновляются, извлекая данные из серверной части в проекте Angular-v6 Universal - PullRequest
Новая
       32

Метаданные и заголовок не обновляются, извлекая данные из серверной части в проекте Angular-v6 Universal

0 голосов
/ 21 мая 2018

Я настроил проект Angular CLI -v6.0.0 и визуализировал со стороны сервера по этой ссылке Angular Universal .Весь мой проект успешно рендеринг со стороны сервера.Демонстрационная ссылка находится здесь MyUniversalDemo .

Когда я нажимаю на продукт, чтобы перейти на страницу сведений о продукте, заголовок и метаинформация обновляются, и я нашел его в виде исходного кода как свое ожидание, когда яиспользовать статические данные.

Но проблема заключается в том, что я пытаюсь обновить заголовок и метаинформацию путем извлечения данных из бэкэнда с помощью http-запроса, заголовок и метаинформация не обновляются.

Мой контент SEOСлужба обновления: 

import { Injectable, Inject } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Injectable()
export class SeoContentLoaderService {

constructor(private titleService: Title, private metaService: Meta) { }

setContent(title: string, description: string, keywords: string, slug: string = '', image: string = '', update = true) {
            let tags = {
                title: title && title != '' && update ? title : "Boibazar Largest Online Book Store in Bangladesh",
                description: description && description != '' && update ? description : "Buy Books & Get Home Delivery anywhere in Bangladesh",
                keywords: keywords && keywords != '' && update ? keywords : "Books, Boibazar, Boimela, Book, Bangladesh, Largest, Big, Boro, Bishal, Online, Shop, Place",
                image: image
            }

            this.titleService.setTitle(tags.title);

            this.metaService.updateTag({ name: 'twitter:card', content: 'Product' });
            this.metaService.updateTag({ name: 'twitter:site', content: 'Boibazar.com' });
            this.metaService.updateTag({ name: 'twitter:title', content: tags.title });
            this.metaService.updateTag({ name: 'twitter:description', content: tags.description });
            this.metaService.updateTag({ name: 'twitter:image', content: `http://118.179.223.38:8081/${tags.image}` });

            this.metaService.updateTag({ property: 'og:type', content: 'Product' });
            this.metaService.updateTag({ property: 'og:site_name', content: 'Boibazar.com' });
            this.metaService.updateTag({ property: 'og:title', content: tags.title });
            this.metaService.updateTag({ property: 'og:description', content: tags.description });
            this.metaService.updateTag({ property: 'og:image', content: `http://118.179.223.38:8081/${tags.image}` });
            this.metaService.updateTag({ property: 'og:url', content: `http://118.179.223.38:8081/book/${slug}` });
        }
    }

И компонент продукта подробно: 

    import { Component, ViewContainerRef } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { ProductService, SeoContentLoaderService } from'../shared/services';

         @Component({
            selector: 'product-detail',
            templateUrl: './product.details.html',
            styleUrls: ['./product.details.scss'],
            encapsulation: ViewEncapsulation.None
        })

    export class ProductDetailComponent {
        public product: any = {};
        constructor(
                  private seoContentLoaderService: SeoContentLoaderService,
                  private route: ActivatedRoute,
                  public productService: ProductService){}

        ngOnInit() {
         let slug=this.route.snapshot.params['slug'];
         this.productService.get(slug).subscribe((result) => {
           this.product = result.product;
           this.seoContentLoaderService.setContent(
           this.product.name, this.product.meta_tag_description, 
           this.product.meta_tag_keywords, slug, this.product.image
           );
        })
       }
...