angular -安全地获取延迟加载的DOM元素的引用
我有一个模板节，只有当相应的对象存在时，它才会出现在DOM中。此外，我还想获取表单引用并附加一个可观察到的fromEvent('change')。
由于数据可能在ngAfterViewInit之后到达，因此不会有要获取的引用。
视图
<div *ngIf="user$ | async">
<form id="form" #form></form>
</div>组件
@ViewChild('form') form;
ngOnInit(){
this.user$ = this.someService.getUser() // returns Observable<User>
}
ngAfterViewInit(){
const form = document.getElementById('form')
fromEvent(form || this.form,'change')...
}我还尝试将它移到observable的回调中，比如
ngAfterViewInit(){
this.user$ = this.someService.getUser().pipe(map(res => {
const form = document.getElementById('form')
fromEvent(form || this.form,'change')...
return res
}))
}请不要建议任何涉及setTimeout()的解决方案
回答 2
Stack Overflow用户
发布于 2018-07-20 06:00:58
在您的代码中使用
@ViewChild('form') form;这基本上是说“在组件中定义一个实例变量form，并将其值设置为由#form标识的任何DOM元素。
一旦创建了由#form标识的元素，Angular就会设置实例变量form的值。
关键是，在你的ngAfterViewInit中你会说
ngAfterViewInit(){
const form = document.getElementById('form')
fromEvent(form || this.form,'change')...
}这表示您希望用id为form的元素的值设置一个仅在ngAfterViewInit方法中可见的变量form。
当ngAfterViewInit运行时，该元素可能还不存在，并且您并不真正知道何时会创建它。顺便说一句，您还创建了第二个仅在ngAfterViewInit中可见的变量form，用于保存this.form应该保存的相同内容，即组件实例变量。
可以考虑的是删除@ViewChild('form') form;代码以及ngAfterViewInit逻辑，只需向formChanged元素添加一个事件such，例如
<div *ngIf="user$ | async">
<form id="form" (changed)="formChanged($event)"></form>
</div>然后实现一个方法formChaged(event)来做你需要做的任何事情。
Stack Overflow用户
发布于 2018-07-20 17:32:05
@Picci的回答是正确的，即对于您发布的代码，您应该简单地在表单标记上使用(changed) Angular事件，而不是直接连接到DOM中。但是，如果您确实需要像您所说的那样获取对后期加载组件的引用，则需要执行以下操作：
formInitialised: bool = false;
// Implement AfterViewChecked to run this each time the view
// changes - note this will run many times, so you need to keep
// track of whether you have done whatever form initialisation
// you need.
ngAfterViewChecked() {
// Check if form is now defined
if (this.form && !this.formInitialised) {
// Do whatever you need to do with this.form
this.formInitialised = true;
}
// If the form has disappeared from the page, update
// our flag to say so.
if (!this.form && this.formInitialised) this.formInitialised = false;
}https://stackoverflow.com/questions/51428302
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号