javascript - Angular 2/4/Universal - JSON-LD verilerini nasıl kullanılır?

Bir Angular 4 Universal uygulamam var ve JSON-LD formatında mikro veri kullanmaya başlamak istiyorum.

Birkaç içerik içeren bir script etiketi kullanır, örneğin:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  ...
}
</script>

Bu verinin her görüntüleme için değişmesi gerektiğinden, Angular 4'te rota değiştiğinde bu veriyi enjekte etmenin bir yolunu arıyorum. Şu anda şablonlardan script etiketleri kaldırılıyor. document.createElement ile bir geçici çözüm kullanıldığında, bu sunucu tarafı Angular Universal uygulamasında çalışmıyor.

Bunu nasıl yapardım?

DÜZENLE

Angular 4.x.x kullanıyorum, şimdi buna basit Angular deniyor. document'i şöyle enjekte ediyorum:

import { DOCUMENT } from '@angular/platform-browser';

class Test {
  constructor(@Inject(DOCUMENT) private _document) {
  }

  public createScriptTag() {
    this._document.createElement('script'); // doesn't work server-side
  }
}

Cevap #1

DÜZENLEME: yorumlarda belirtildiği gibi, bu çözüm geçici bir çözümdür ve dikkatli kullanılmalıdır.

DOM'a referans almak için başka bir tür ve 'ɵgetDOM' ve 'ɵDomAdapter' işlevlerini enjekte edebilirsiniz. Bunları 'bazı' hizmet ve işlevler olarak adlandırdığım için özür dilerim, çünkü buna neden bu şekilde isim verdiklerini gerçekten bilmiyorum. Kaynak koduna baktım ve Angular ekibinin bunu MetaService ile nasıl yaptığını kontrol ettim.

import { Inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ɵgetDOM, ɵDomAdapter, DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class SeoService {

  private dom: ɵDomAdapter;

  constructor(@Inject(DOCUMENT) private document: any,
              private titleService: Title,
              private metaService: Meta) {

    this.dom = ɵgetDOM();

    let scriptEl = this.dom.createElement('script');
    // ..

  }
}

Bunu test ettim ve üretimde kullanıyorum.

Cevap #2

Buna geç kaldım ama işte bunu nasıl yaptığımız:

import { AfterViewInit, Component, Inject, Input, OnInit, Renderer2 } from '@angular/core';

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-post-article',
  templateUrl: './article-post.component.html',
  styleUrls: ['./article-post.component.css', './post-article-post.scss']
})
export class PostArticleComponent implements OnInit, AfterViewInit {
  
  @Input() feed = new FeedModel();

  constructor(private router: Router,
              private sanitizer: DomSanitizer,
              private renderer2: Renderer2,
              @Inject(DOCUMENT) private _document: Document) { } 

  createJsonLd() {
    let userId = this.feed.generatedByUserId.toString();
    let script = this.renderer2.createElement('script');
    script.type = `application/ld+json`;
    script.text = `
        {
            "@context": "https://schema.org",
            "@type": "NewsArticle",
            "headline": "` + this.feed.feedData.ArticleTitle + `",
            "image": [
              "` + this.feed.feedData.ImageUrl + `"
             ],
            "datePublished": "` + this.feed.createdUtcTimestamp + `",
            "dateModified": "` + this.feed.createdUtcTimestamp + `",
              }]
        }
    `;

    this.renderer2.appendChild(this._document.body, script);
  }

  ngAfterViewInit() {
      setTimeout( () =>
        this.createJsonLd()
      , 100);
  }
}

İlgili makaleler