重定向到具有查询参数的URL并将值分配给查询参数中的反应形式不起作用怎么办-Angular？
我正在重定向到带有查询参数的URL，并使用setValue将查询参数中的值分配给表单，但最初不显示值，而是在刷新后显示。
从查询参数获取值并分配给表单：
constructor(private fromBuilder: FormBuilder, private _API: RestService, private storageService: StorageService, private route: ActivatedRoute) {
if (!this.formsInitialized) this.initForms()
this.route.queryParams.subscribe((params) => {
if (params.user) {
this.registerForm['controls']['cpName'].setValue(JSON.parse(decodeURIComponent(params.user)).name, { onlySelf: false })
this.registerForm['controls']['cpEmail'].setValue(JSON.parse(decodeURIComponent(params.user)).email, { onlySelf: false })
}
})
}
ngOnInit() { }
initForms() {
this.formsInitialized = true
this.registerForm = this.fromBuilder.group({
cpName: ['dfdfd', [Validators.required, Validators.minLength(4), Validators.maxLength(30), Validators.pattern(this.namePattern)]],
cpEmail: ['', [Validators.required, Validators.pattern(this.emailPattern)]],
dname: ['', [Validators.required, Validators.maxLength(15), Validators.pattern(this.domainPattern)]],
bname: ['', [Validators.required, Validators.maxLength(50), Validators.pattern(this.brandPattern)]],
password: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(15)]],
token: [''],
googleId: [''],
imageUrl: [''],
});
}
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
从你的描述来看，问题在于表单控件的值在页面初次加载时没有立即显示，而是在刷新页面后才出现。这通常是因为Angular的变更检测机制在你设置表单值时尚未触发视图更新。尽管你在subscribe中设置了表单值，但在某些情况下，Angular可能还没有机会运行变更检测来更新UI。
为了解决这个问题，你可以尝试以下几种方法：
-
使用
ChangeDetectorRef强制变更检测: 在设置表单值之后，手动调用变更检测器的detectChanges()方法来强制更新视图。import { ChangeDetectorRef } from '@angular/core'; constructor( ..., private cdr: ChangeDetectorRef ) {} this.route.queryParams.subscribe((params) => { if (params.user) { ... this.cdr.detectChanges(); } }); -
确保初始化逻辑正确执行: 确保
initForms()在订阅之前已经被调用，并且formsInitialized标志被正确设置。如果可能，可以考虑将表单初始化和参数订阅放在ngOnInit生命周期钩子中以确保正确的执行顺序。 -
使用
markForCheck(): 如果你的组件使用了OnPush变更检测策略，那么应该使用ChangeDetectorRef.markForCheck()而不是detectChanges()。 -
异步处理: 尽管你的代码看起来已经异步处理了查询参数，但有时包裹在
setTimeout中可以帮助 Angular 在下一个微任务队列中处理变更检测，虽然这不是最佳实践，但在某些特定场景下可能有效。setTimeout(() => { this.cdr.detectChanges(); }); -
检查表单初始化时机: 确保
this.formsInitialized在initForms()被执行后被设置为true，并且在尝试访问表单控件之前是正确的状态。
尝试上述方法之一或结合使用，看是否能解决你的问题。记得测试不同的场景以确保解决方案的稳定性和可靠性。
