<article class=“article fmt article-content”><p>本文波及到的代码,位于这个 Github 仓库:https://github.com/wangzixi-d…</p><h1>问题形容</h1><p>我应用如下代码进行 ng-template 模板的参数传递:</p><pre><code class=“html”><ng-template #inputTemplateWithContent let-param let-name=“name”> <div>参数1: {{param}}</div> <div>参数2: {{name}}</div></ng-template></code></pre><p><span class=“img-wrap”></span></p><p>这里对于上图的代码地位 2,我用关键字 <code>let-</code>,定义了一个仅模板里可能拜访的局部变量 <code>name</code>,其数据源来自传入该模板的上下文对象 context 的同名属性 <code>name</code>。</p><p>而对于代码地位1 处的 param,我没有指定其映射到上下文对象中的属性名,因而我冀望它应用上下文对象里的默认<code>同名</code>属性,因而最初第一个 div 元素里应该显示属性 <code>param</code> 的值:<code>默认值</code>。</p><p><span class=“img-wrap”></span></p><p>然而理论的执行后果却是,第一个 div 元素显示的值为空:</p><p><span class=“img-wrap”></span></p><h1>问题剖析</h1><p>这个问题的本源是如何将上下文对象里的某个属性作为<code>默认</code>属性,传递给模板。</p><p>在 Angular 官网里找到了这样的对于默认值的文档:</p><p><span class=“img-wrap”></span></p><p>上下文对象的精确含意:</p><blockquote>附加到 EmbeddedViewRef 的上下文对象。 这应该是一个 JSON 对象,该对象的键将可用于本地模板 let 申明的绑定。 在上下文对象中应用键 $implicit 会将其值设置为默认值。</blockquote><p>文档提到,默认属性应该用 <code>$implicit</code> 来标识。</p><p>咱们在源代码里依据关键字 <code>$implicit</code> 搜寻,找到了常量 <code>IMPLICIT_REFERENCE</code>,再依据该常量搜寻,就能找到 Angular 框架源代码解析 <code>$implicit</code> 之处:</p><p><span class=“img-wrap”></span></p><p>这里咱们就能找到 Angular 解析 template variable 的逻辑:</p><p><span class=“img-wrap”></span></p><p><code>InterpolationConfig</code> 的 start 和 end 符号:<code>{{</code>, <code>}}</code></p><p><span class=“img-wrap”></span></p><h1>解决方案</h1><p>将下图图例1地位处的 <code>param</code> 批改成 <code>$implicit</code> 即可:</p><p><span class=“img-wrap”></span></p><h1>总结</h1><p>从上面这个调用栈里还能察看到模板里蕴含的 HTML 元素,在内存中对应的 DOM 节点:</p><p><span class=“img-wrap”></span></p><p>ng-template, ng-container 和 br,别离对应 HTML 文件里上面三个元素:</p><p><span class=“img-wrap”></span></p></article>