🐞 bug报告
受影响的软件包
问题是由 @angular/upgrade/static 软件包引起的
是否为回归？
不确定
描述
当 ng-if 添加内容时，只有在第一次发生 transclusion - 下一次 ng-if 添加内容时，被 transcluded 的内容上的组件不会被初始化。
<aio-app> <!-- downgraded aio component -->
<ajs-show-hide> <!-- upgraded ajs component -->
<button ng-init="shown = false" ng-click="shown = !shown">Show/Hide</button>
<div ng-if="shown">
<ng-transclude>
<aio-counter> <!-- native aio component, transcluded by aio-app into ajs-show-hide -->
<ajs-counter> <!-- upgraded ajs component -->
<button ng-init="count = 0" ng-click="count = count + 1">Bump!</button>
Count: {{count}}
</ajs-counter>
</aio-counter>
</ng-transclude>
</div>
</ajs-show-hide>
</aio-app>🔬 最小复现
- 转到 https://stackblitz.com/edit/angular-puip4w?file=src%2Findex.html
- 点击
Show/Hide按钮 - 点击
Bump!按钮 - 确保计数器已更新
- 点击
Show/Hide按钮，以隐藏计数器 - 点击
Show/Hide按钮，以再次显示计数器 - 观察计数器处于之前的状态(计数器显示最后一个可见计数的数量)- 这不符合预期，它应该设置为0
- 点击
Bump!按钮 - 计数器未更新 - 组件已损坏
或者： - 克隆 https://github.com/zuzusik/angular-upgrade-bug
- 运行
npm install - 运行
ng serve - 打开 http://localhost:4201/
- 从上面的列表中转到第2步
8条答案
按热度按时间sdnqo3pr1#
感谢你报告这个问题，@zuzusik。你能在StackBlitz上创建一个最小的复现吗？(你可以以this为起点。)
qf9go6mv2#
@gkalpak 当然，我们继续： https://stackblitz.com/edit/angular-puip4w?file=src%2Findex.html
ps:你提供的模板看起来太过时了 - 我刚刚从典型的Angular模板开始
6yjfywim3#
我对此进行了一些研究(但还没有完全弄清楚)。以下是一些想法/发现：
这似乎已经达到了
ngUpgrade的极限(具有4层交错的AngularJS/Angular组件 + 内容投影/内容投影 + 结构指令)😁此外，请注意，Angular的内容投影与AngularJS的transclusion(前者急切地示例化组件，而后者懒惰地示例化它)的工作方式不同。
除此之外，我们的transclusion模拟显然在处理如此复杂的场景方面做得不太好。
最后，可能存在一些问题，即从AngularJS结构指令传播到降级的Angular组件的
$destroy事件。(我需要进一步调查。)肯定还有更多的研究要做。我会在接下来的几天未来的某个时间尝试解决这个问题。顺便说一下，为了参考，这里是失败示例的示例实现(还显示了每个实现何时调用几个生命周期钩子),位于：
eaf3rand4#
这似乎已经达到了
ngUpgrade的极限(具有4层交错的AngularJS/Angular组件+ transclusion/content projection +结构化指令)😁这些限制是否在某个地方有文档记录？
另外，当达到这些限制时，如果能收到控制台错误信息就更好了 - 否则完全不清楚发生了什么。
j2datikz5#
这两个链接都指向
Hybrid AngularJS/Angular示例。fnatzsnv6#
此外，这并不能完全重现问题 - 在显示/隐藏后计数器不会重置(这是原始描述中的一部分问题),但它仍然有效(在原始问题中，第一次显示/隐藏后就会出错)。
lb3vh1jj7#
这似乎已经达到了ngUpgrade的限制(有4层交错的AngularJS/Angular组件+内容投影/内容投射+结构化指令)😁
这些限制是否在某个地方有文档记录？
另外，当达到这些限制时，如果能收到控制台错误信息就更好了 - 否则完全不清楚发生了什么。
不，我们不知道这些限制是什么(也不是有意为之)😁
这两个链接都指向混合AngularJS/Angular示例
哦，已经修复了。
Hybrid AngularJS/Angular
此外，这个实现并没有完全重现问题 - 在显示/隐藏计数器后，它没有被重置(这是原始描述中的问题的一部分),但它仍然可以工作(在原始问题中，第一次显示/隐藏后就会出问题)。
不，这是纯Angular实现，没有问题。问题在于ngUpgrade(以及特定组合的嵌套组件/内容投影/结构化指令)。
tzxcd3kk8#
以防万一：最近在Angular 11.0.2中遇到了这个问题——bug仍然存在。