Angular里使用createEmbeddedView的单步调试

2024-05-25 09:34:59

入口：点击按钮：

jerryContainer的定义：ViewContainerRef

_hostTNode:

container_id:

_hostView:

_lContainer:

需要添加的视图片段：

_ngContext_的内容：包含了视图所有的UI元素：

首先创建，再渲染：

渲染添加后的view片段：

渲染视图就是执行它的template function：

开始生成view里的DOM元素了：这一点和SAP WebClient UI类似：

最后还是调用浏览器的原生api：document.createElement来创建span节点：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular里使用createEmbeddedView的单步调试相关推荐

SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...
Angular里使用createEmbeddedView动态加入新的模板元素
html源代码: <div><ng-template #tpl><span>鬼子到我想干什么</span></ng-template>< ...
Angular HttpClient.get的实现单步调试
进入get方法: request方法实现的源代码: @Injectable() export class HttpClient {constructor(private handler: HttpHa ...
关于 Angular view Query 的 id 选择器问题的单步调试
问题描述我有这样一个 Angular Component,模板文件如下: @Component({ selector: 'example-app', template: ` <pane id= ...
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
问题描述我创建了一个 selector 为 app-content-section 的 Component,用于容纳内容投影(content projection): 这个 Component 的模 ...
Angular 内容投影 content projection 的一个问题的单步调试
问题描述我使用如下代码测试一个最简单的 Angular 内容投影场景: import { Component } from '@angular/core';@Component({selector: ...
Angular 内容投影 content projection 关于选择器问题的单步调试
问题描述我定义了一个能够允许消费者 Component 将其自定义内容通过 content projection 投射进来的 Component: import { Component } from ...
SAP Spartacus 服务器端渲染单步调试步骤之二：在服务器端执行应用程序 Angular 代码
前文:SAP Spartacus 服务器端渲染单步调试步骤之一:应用程序准备工作入口: 进入 platform-server.js: 入口: 最终在服务器端执行 bootstrap,输入 Compo ...
从ngrx store里selector出来的Observable，执行subscribe的单步调试
源代码: getNextPageContext(): Observable<PageContext> {const a = this.store.pipe(select(RoutingSe ...

最新文章

热门文章