在 Angular 中渲染 Web 组件？答案

【问题标题】：Rendering a Web Component in Angular?在 Angular 中渲染 Web 组件？
【发布时间】：2021-01-16 23:21:48
【问题描述】：

在 this demo 中，HelloComponent 在呈现的标记中包含一个 Web 组件 fs-image。这是组件：

import { Component, Input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: "hello",
  template: `
    <div [innerHTML]="safeHTML"></div>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  constructor(private dm: DomSanitizer) {
    this.safeHTML = this.dm.bypassSecurityTrustHtml(this.html);
  }
  @Input() name: string;
  safeHTML: SafeHtml;

  html: string = `
  <h1> Web Component Test</h1>
  <fs-image url="https://fireflysemantics.github.io/i/developer/instant-html-vscode.png"></fs-image>
  `;
}

包含 Web 组件的 html 属性通过 DomSanitizer.bypassSecurityTrustHtml 传递，这样 Angular 就不会剥离自定义元素。

因此，当组件呈现时，它确实包含自定义元素，但它没有呈现。它应该像这样呈现：

https://stackblitz.com/edit/typescript-fs-image-demo

Web 组件通过 CDN 包含在标头中。 CDN 声明如下所示：

<head>
  <script src="https://unpkg.com/@fireflysemantics/fs-image"></script>
</head>

关于它为什么不渲染的任何想法？

【问题讨论】：

标签： javascript angular typescript web-component lit-element

【解决方案1】：

好的 - 明白了。在这种情况下，fs-image 使用100% 作为宽度和高度，所以我必须将它放在一个指定高度的容器中。

【讨论】：