在 html 标签中每页添加微数据 angular 5

Question

我正在处理 angular 5 个应用程序，但我在某个时候卡住了。我想在 html 标签中动态添加特定于每个页面的微数据，例如

<html itemscope itemtype="http://schema.org/QAPage">

有什么办法吗？如果有的话请告诉我。

Answer 1

对于结构化数据，google好像推荐ld+json。查看 intro to structured data。如果你决定使用 ld+json 你可以使用这样的东西：

@Component({
  selector: 'json-ld',
  template: ``,
  styleUrls: ['./json-ld.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JSONLdComponent implements OnInit {
  private _json: SafeHtml;
  @Input()
  @HostBinding('innerHtml')
  set json(v: any) {
    this._json = this.getSafeHtml(v);
  }

  get json() {
    return this._json;
  }

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {}

  private getSafeHtml(value: object) {
    const json = value
      ? JSON.stringify(value, null, 2).replace(/<\/script>/g, '<\/script>')
      : '';
    const html = `<script type="application/ld+json">${json}</script>`;
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

可作为 npm package。

如果您想将 <meta> 标签添加到您的页面，请查看 Meta class。您可以将它注入任何组件和 add/remove/update meta 标签。

在 html 标签中每页添加微数据 angular 5

Add microdata per page in html tag angular 5

microdata

angular