Angular里使用createEmbeddedView动态加入新的模板元素

简介: Angular里使用createEmbeddedView动态加入新的模板元素

html源代码:

<div>
    <ng-template #tpl>
      <span>鬼子到我想干什么</span>
    </ng-template>
    <div #container></div>
    <button (click)="showTpl()">显示template</button>
  </div>

这部分源代码的运行时对应的原生html代码:image.png

通过比较,html源代码里的ng-template代码没有出现在运行时的原生html代码:

    <ng-template #tpl>
      <span>鬼子到我想干什么</span>
    </ng-template>

image.png

showTpl的实现代码:

  showTpl() {
    this.container.createEmbeddedView(this.tt);
  }

点了按钮之后的html源代码:image.png

效果就是以前被包裹在ng-template里用#命名的span元素,已经出现在了html源代码里:

image.png

相关文章
|
28天前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
28 0
|
28天前
|
开发者 容器 Docker
JSF与Docker,引领容器化浪潮!让你的Web应用如虎添翼,轻松应对高并发!
【8月更文挑战第31天】在现代Web应用开发中,JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起,容器化技术变得日益重要,Docker作为该领域的佼佼者,为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用,帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制,并根据实际情况做出合理选择。
28 0
|
2月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
58 1
|
4月前
|
JavaScript 开发者 UED
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
|
10月前
|
搜索推荐 API SEO
Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程
Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程
|
4月前
|
JavaScript
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
|
10月前
|
存储 JSON 前端开发
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
|
11月前
|
前端开发 JavaScript UED
Angular 动态导入和懒加载的深入介绍
Angular 动态导入和懒加载的深入介绍
|
11月前
|
SEO
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
|
API
Angular 2.x折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点
表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
163 0