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

Question

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

1. 如果我将 <template><img src="url2" /></template> 添加到任何 Angular 组件模板文件，url2 处的 img 资源将被下载，并且 DOM 包含一个模板元素，其中包含一个空文档片段和一个 img 元素作为兄弟元素

如何将<template ... sn-p 添加到 Angular 模板中，如 2)，但结果与 1) 相同？

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

Answer 1

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

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

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

来源：https://www.digitalocean.com/community/tutorials/angular-innerhtml-binding-angular

现在将<template> 中的htmlStr 变量与[innerHTML] 一起使用：

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

这些是我回答的其他来源：Angular 6 create HTMLElement from HTMLTemplateElement https://dev.to/patricksevat/using-web-components-custom-elements-in-template-tag-htmltemplateelement-using-angular-1ik8