Angular - 无法将数据传递到块引用中答案

【问题标题】：Angular - Cannot pass data into blockquoteAngular - 无法将数据传递到块引用中
【发布时间】：2021-06-19 22:41:13
【问题描述】：

我无法将数据传递给 2 个属性 cite 和 data-video-id 中的 blockquote 标签。

我的代码：

<blockquote class="tiktok-embed"
            cite="{{itemVideo.link}}"
            data-video-id="{{itemVideo.video_id}}" style="max-width: 605px;min-width: 325px;">
   <section>
     <a target="_blank" title="{{influencer.socialName}}"href="{{influencer.socialLink}}">{{influencer.socialName}}</a>
   </section>
</blockquote>

响应错误：

Can't bind to 'cite' since it isn't a known property of 'blockquote'. ("ng-container *ngIf="show">
              <blockquote class="tiktok-embed"
                          [ERROR ->]cite="{{itemVideo.link}}"
                          data-video-id="{{itemVideo.video_id}}" style="max"):

【问题讨论】：

好像您缺少一个依赖项，可能是您的module.ts 文件中的import { NgModule } from '@angular/core';？
@Dinh 你找到解决方案了吗？
@Shafkhan 我在下面发布了我的解决方案。希望能帮到你

标签： angular embed tiktok

【解决方案1】：

我找到了解决办法

tiktok.component.html

<div [innerHTML]="tiktokDetailVideo"></div>

titkok.component.ts

import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { NgxSpinnerService } from 'ngx-spinner';

export class TiktokVideoComponent implements OnInit, OnChanges {
 @ViewChild('videoDetail') private videoDetail: ElementRef;
 tiktokDetailVideo: any;
 isClickVideo = false;
 itemVideo;
 listPostVideo = [];

 constructor(
    private spinner: NgxSpinnerService,
    private sanitizer: DomSanitizer,
  ) {}
 ngOnInit() {}
 ngOnChanges(changes: SimpleChanges) {}

 detailPostVideo(post) {
    this.isClickVideo = true;
    this.itemVideo = post;
    this.tiktokDetailVideo = this.renderVideoTiktok(post);
    this.loadScript('https://www.tiktok.com/embed.js').then(status => {
      if (status === 'loaded') {
        this.show = true;
      }
    });
    if (this.type === 'tiktok') {
      this.spinner.show();
    }
    setTimeout(() => {
      const element = document.getElementById(post.id + '-video-post');
      if (element) {
        this.listVideoPost.nativeElement.scrollTop = element.offsetTop - 200;
      } else {
        this.listVideoPost.nativeElement.scrollTop = -30;
      }
      if (this.videoDetail) {
        this.videoDetail.nativeElement.scrollTop = -30;
      }
    }, 700);
    setTimeout(() => {
      this.spinner.hide();
    }, 3000);
  }

 renderVideoTiktok(post) {
    const html = '<blockquote class="tiktok-embed" cite="' + post.link + '" '
    + 'data-video-id="' + post.videoId + '" style="max-width: 605px;min-width: 325px; margin: 0 auto;" > <section> '
    + '<a target="_blank" title="' + post.socialName + '" href="' + post.socialLink + '">'
    + '@' + post.socialName + '</a> '
    + '</section> '
    + '</blockquote>';
    return  this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

【讨论】：