angular知识总结

本文详细解析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);
}
componentRef
viewContainer
viewContainerRef

可以包含一个或者多个视图的容器

templateRef

内嵌模板,可用来创建内嵌视图

embeddedViewRef

内嵌视图

elementRef

对视图中某个原生元素的包装器。


                
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值