1

我正在尝试动态创建一个嵌入组件。基本上，当用户单击工具栏按钮时，我希望它在光标位置插入嵌入组件的 HTML。一切都很好，除了实际获取 HTML 本身。

这是我在文档中遵循的指南

https://angular.io/guide/elements

在小节角度元素下，也许我在这里使用了错误的东西。但如果有人有其他建议，我很想听听。

这是负责生成嵌入的代码

    link(event)
    {
       const embed = document.createElement('embed-card')  as NgElement & WithProperties<{embedSrc: string}>;
       embed.embedSrc = 'https://github.com/itteco/iframely';
       console.log(embed);
       console.log(embed.innerHTML);
       this.myckeditor.instance.insertHtml(embed.innerHTML);
    }

这是嵌入组件本身

@Component({
  selector: 'embed-card',
  templateUrl: './embed.component.html',
  styleUrls: ['./embed.component.css'],
  providers: [EmbedService]
})

export class EmbedComponent implements OnInit, OnChanges {

  @Input()
  embedSrc: string;
  embedData: any[];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private embedService: EmbedService
  ) { }

  getEmbedJsonData() {
    this.route.queryParams.subscribe((params: Params) => {
      this.embedService.GetMetaTagData(this.embedSrc)
        .subscribe((data: any) => {
          this.embedData = data;
          console.log(this.embedData);
        }
        );
    });
  }

  ngOnInit() {
    this.getEmbedJsonData();
  }

  ngOnChanges() {
    //console.log("it got changed");
    this.getEmbedJsonData();
  }
}

以及此处嵌入的随附 HTML

<div *ngIf = "embedData.length != 0" class = "media embed-box">
    <a [ngStyle] = "{

                     'background-image': 'url('+ embedData.thumbnail_url +')',
                     'width' : '218.816px',
                     'height': '120px' 
                    }"></a>


    <!-- <img class = "embed-thumbnail" [src]='embedData.thumbnail_url'/> -->
    <div class = "embed-body" style = " margin-left: 10px;">
        <div class = "media-body">
            <h5 class = "mt-0"> {{ embedData.title }} </h5>
            <p class = "description block-with-text"> {{ embedData.description }} </p>
        </div>
    </div>    
</div>

是的，我确实在运行服务器，因此肯定会收到嵌入元数据。

当我运行它时，innerHTML 为空。embed-card 对象如下图所示

https://snag.gy/FjNDct.jpg

更新：

这看起来确实像是我应该能够在谷歌上找到的东西，但我已经进行了大量搜索，但没有找到任何关于我的问题的信息。也许我只是搜索不正确，但请如果有人可以给我一个指导手，这将有所帮助，已经 5 天了。

4

0 回答 0