模板标签内容为空答案

【问题标题】：Template tag content is empty模板标签内容为空
【发布时间】：2019-12-31 17:11:03
【问题描述】：

我正在尝试在 Angular 组件中使用 template 标记。

在MDN example 之后，我创建了一个类似的stackblitz example。

在原始示例中，template 标签没有子标签，但它的内容有子标签。在我的例子中，情况正好相反。模板有子，内容为空（打开控制台点击按钮查看）。

因此，尝试操作克隆的模板内容失败。

我做错了什么？

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  click() {
    const template: HTMLTemplateElement = document.querySelector('#t');
    console.log(`template.childElementCount: ${template.childElementCount}`);
    console.log(`template.content.childElementCount: ${template.content.childElementCount}`);
    const content = document.importNode(template.content, true);
    console.log(content.querySelector('.c2'));
  }
}

app.component.html

<button (click)="click()">test</button>
<template id="t">
    <div class="c1">
        <div class="c2">{{ name }}</div>
    </div>
</template>

控制台结果

【问题讨论】：

标签： html angular

【解决方案1】：

您应该只调用 template 而不是 template.content 作为第一个参数。

const content = document.importNode(template, true);
console.log(content.querySelector('.c2'));

【讨论】：

你能解释一下区别吗？
在文档示例中，将整个节点设置为第一个参数。 developer.mozilla.org/en-US/docs/Web/API/Document/… 但我同意你的观点，它应该接受 DocumentFragment 类型的参数。
您提到的示例无济于事，因为它不涉及模板标签。它只是克隆了一些节点...

【解决方案2】：

原来有一个关于此的开放错误：https://github.com/angular/angular/issues/15557

作为一种解决方法，我使用createElement 创建了template。

const name = "answer";
const template = document.createElement('template');
template.innerHTML = `<div class="c1"><div class="c2">${name}</div></div>`;
console.log(`template.childElementCount: ${template.childElementCount}`);
console.log(`template.content.childElementCount: ${template.content.childElementCount}`);
const content = document.importNode(template.content, true);
console.log(content.querySelector('.c2'));

【讨论】：