乐趣区

关于javascript:关于-ngtemplate-通过-input-传入另一个-Component-不能工作的问题调试

问题形容

本文设计到的代码仓库:https://github.com/wangzixi-d…

host Component:

<ng-template #paramTemplate>
    <div> 我是 #paramTemplate 里的 div 标签 </div>
</ng-template>

<app-template-input inputTemplate='paramTemplate'></app-template-input>

我冀望把 id 为 paramTemplate 的模板实例传入子 Component:app-template-input.

然而运行时 Chrome console 报错:

这些谬误没有一个是在我书写的代码之内:

ERROR TypeError: templateRef.createEmbeddedView is not a function

at ViewContainerRef.createEmbeddedView (core.js:10190:45)
at NgTemplateOutlet.ngOnChanges (ng_template_outlet.ts:65:28)
at NgTemplateOutlet.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2373:14)
at callHook (core.js:3285:14)
at callHooks (core.js:3251:17)
at executeInitAndCheckHooks (core.js:3203:9)
at refreshView (core.js:7395:21)
at refreshComponent (core.js:8527:13)
at refreshChildComponents (core.js:7186:9)
at refreshView (core.js:7430:13)

问题剖析

从调用栈 ViewContainerRef.createEmbeddedView 开始剖析。设置断点开始调试:

从新刷新页面,断点触发:

查看变量 templateRef,发现它的值是一个字符串。

然而接下来的语句,须要调用 templateRefcreateEmbeddedView 办法。显然,string 类型的变量,其原型链上是不可能有这个办法的,所以报错。

咱们留神到,以后的调用栈,产生在 ngTemplateOutletngOnChanges 办法内。

查看 app-template-input 的实现,发现 @Input 接管的数据类型为 TemplateRef,因为只有这个类型,才定义了 createEmbeddedView 办法。

咱们的实现里,谬误地给其传入了一个字符串。

解决办法

给属性 inputTemplate 加上一对中括号,应用表达式绑定语法,这样 paramTemplate 会被当作一个表达式执行,导致第 48 行的 paramTemplate 实例被传给 @Input:

最初问题解决:

总结

这里咱们用 ng-container 里包裹了一个构造指令 *ngTemplateOutlet.

看 app-template-input 的实现。

任何生产 TemplateInputComponent 的 parent Component,都须要给第 18 行的 @Input 赋一个模板实例。

赋值语法如下:

<app-template-input [inputTemplate]="paramTemplate"></app-template-input>

看起来给 inputTemplate 赋值的内容 paramTemplate 是一个字符串,理论是一个 表达式

最初生成的源代码:

这里应用 *ngTemplateOutlet,动静生成一个 template 实例。

也就是说,ng-template 用 # 定义的 id,和 ng-container, *ngTemplateOutlet 这三者是配合起来应用的。

退出移动版