模板标签内容为空

Question

我正在尝试在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>

控制台结果

Answer 1

您只能调用template，而不能调用template.content作为第一个参数。

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

Answer 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'));