Angular、<template> 元素和#document-fragment

Question

如果我在任何基本 HTML 页面中添加 <template><img src="url1" /></template>，则不会下载 url1 处的 img 资源，并且根据 Chrome DevTools a document-fragment 包含 img 元素被创建

如果我将 <template><img src="url2" /></template> 添加到任何 Angular 组件模板文件，则会下载 url2 处的 img 资源，并且 DOM 包含一个带有空模板元素的模板元素document-fragment 和一个 img 元素作为兄弟姐妹

如何将 <template ... 片段添加到 Angular 模板中，如 2) 中所示，但结果与 1) 中的相同？

ngNonBindable 在 <template> 元素或 <img> 元素上似乎没有效果。
我正在使用 Angular 10.
我需要这样做，因为我正在使用需要使用 <template> 元素配置的第三方库，其中特定标记为 img src 值，将在内部替换。

Answer 1

<template> HTML 标签在 Angular 中的呈现方式肯定不同。

使用 [innerHTML] 绑定让您的模板像在 Angular 之外一样呈现内容。在测试您的示例时，我需要将 img HTML 定义为组件中的单独变量，如下所示，以免被 Angular:

清理

export class SomeComponent {
  htmlStr: string = '<img src="url1" />';
}

现在使用 <template> 中的 htmlStr 变量与 [innerHTML]:

<template [innerHTML]="htmlStr"> </template>

Angular, <template> element and #document-fragment