Question

我正在进行角度5应用，但我一度陷入困境。我想在html标签中动态添加特定于每页的微数据，如

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

有没有办法做到这一点？如果有的话，请告诉我。

Answer 1

对于结构化数据，谷歌似乎推荐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课程。您可以将其注入任何组件并添加/删除/更新meta标记。

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

1 个答案: