在 Angular 中渲染 Web 组件？

如何解决在 Angular 中渲染 Web 组件？

在 this demo 中，HelloComponent 在呈现的标记中包含一个网络组件 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>

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

解决方法

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