在Angular中的路由导航(router.navigate)会导致目标组件渲染两次。解决方法是在目标组件中使用ngOnInit订阅参数改变的行为,并检查参数是否发生变化。如果是,则执行相应的操作,如果不是,则忽略。代码示例如下:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-target',
templateUrl: './target.component.html',
styleUrls: ['./target.component.css']
})
export class TargetComponent implements OnInit {
private paramId: number;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
const id = +params.get('id');
if (id !== this.paramId) { // 检查参数是否发生变化
this.paramId = id;
// 执行相应的操作
}
});
}
}