在 Angular 中渲染 Web 組件？

Question

在此演示中， 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 包含在 header 中。 CDN 聲明如下所示：

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

關於它為什么不渲染的任何想法？

Answer 1

好的，我知道了。 在這種情況下， fs-image使用100%的寬度和高度，所以我不得不把它放在一個指定高度的容器中。

在 Angular 中渲染 Web 組件？

問題描述

1 個解決方案

解決方案1
0 2021-01-17 00:51:12

在 Angular 中渲染 Web 組件？

問題描述

1 個解決方案

解決方案1 0 2021-01-17 00:51:12

解決方案1
0 2021-01-17 00:51:12