angular知识总结

最新推荐文章于 2024-01-31 16:30:18 发布

页神建辑-思而后学

最新推荐文章于 2024-01-31 16:30:18 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： angular2

本文链接：https://blog.youkuaiyun.com/weixin_41993525/article/details/117449968

本文详细解析Angular中的模板template、componentRef、viewContainerRef、templateRef等概念，包括它们的作用和应用场景。深入探讨ng-template、ng-container、ng-content及@ViewChild、@ViewChildren等指令的使用，并介绍ngTemplateOutlet和ngComponentOutlet在动态组件渲染中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

名词解析

template

template内容模板元素，是一种用于保存客户端内容机制，此内容在加载页面时不会呈现，运行时可被js实例化。
在这里插入图片描述

DocumentFragment表示一个没有父级文件的最小文档对象，常被作为一个轻量版的Document使用。
是Dom节点，不是真实Dom树的一部分。在Dom树中，文档片段被其所有子元素代替。
因为文档片段存在内容中，不存在Dom树中，将元素插入文档片段时，不会引起回流。

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- here -->
  </tbody>
</table>
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

if('content' in document.createElement('template')){
   
   
let t = document.querySelector('#productrow');
td = t.content.querySelectorAll('td');
td[0].textContent = '1235646565';
td[1].textContent = 'Stuff';
let tb = document.getElementsByTagName("tbody");
let clone = document.importNode(t.content, true);
tb[0].appendChild(clone);
// 创建新行
td[0].textContent = '0384928528';
td[1].textContent = 'Acme Kidney Beans';
let clone2 = document.importNode(t.content, true);
tb[0].appendChild(clone2);
}