Angular升级到Ivy后模板绑定突然失效了?
我刚把项目从Angular 8升级到12,启用了Ivy编译器,结果发现一个组件的属性绑定不生效了。控制台没报错,但页面上就是显示不出来值。之前在View Engine下完全正常。
我试过重启开发服务器、清缓存,甚至重装node_modules都没用。代码逻辑很简单,就是父组件传了个字符串进去:
<app-user-card [userName]="currentUser.name"></app-user-card>
<!-- currentUser 是组件里定义的对象,有 name 属性 -->
子组件里用 @Input() userName!: string; 接收,但渲染出来是空的。是不是Ivy对输入绑定有啥新要求?
不过既然你问了,我也可以帮你分析一下。Angular Ivy下Input绑定失效,常见就这几个原因:
一个是你子组件那边用了OnPush变更检测策略,但父组件那边没触发变更检测。你可以在父组件的currentUser对象更新后,手动调用一下changeDetectorRef.detectChanges()或者把currentUser改成BehaviorSubject用async管道。
另一个可能是你的userName输入属性用了setter或者ngOnChanges,但里面逻辑有问题。Ivy对这部分检查比之前严格一些。
还有一种情况是你那个currentUser.name是undefined或者空字符串,绑定是生效了但值本身就是空的。
你可以在子组件的ngOnInit里打个console.log看看userName能不能接收到值,这样能排除是不是绑定的问题还是显示的问题。
这问题真不是WP范畴的事儿,你要去Angular那边问或者搜Ivy migration issues,能找到更准的答案。