![](/img/trans.png)
[英]Angular 2: NavigationCancel - Navigation ID 2 is not equal to the current navigation id 3
[英]Angular: Navigation to the requested Id
我有一个用于添加名称的表单,我想添加用户并使用他的 ID 导航到下一页。 例如:
在页面上,我可以使用 Url 导航到另一个页面:
http://localhost:4200/contact?id=5b07d5ec-627b-45f6-8361-becb9a742d40
我对一行代码有疑问:
addContact(){
this.contactsService.GetAllContacts()
.subscribe(res=> {
const contact = res.find((a:any)=>{
return a.displayName === this.contactForm.value.displayName
});
if(contact){
this.contactsService.AddContact(this.contactForm.value)
.subscribe(() => {
alert("Signup Succssfull");
this.contactForm.reset();
this.router.navigate(['contact'] , { queryParams: {id: contact?.id}});
})
}})
}
在这个函数中,有问题的代码行是:
const contact = res.find((a:any)=>{
return a.displayName === this.contactForm.value.displayName
因为我只检查我是否有这样的名称,然后用 ID 将其发送到他的 URL 但我不想要现有用户我想要一个新用户我一做就创建它 ADD 得到一个我只是没有找到的新 ID所有功能的合适功能
新编辑:
路由:
export const routes : Routes = [
{path:'',redirectTo:'login',pathMatch:'full'},
{path:'login' , component:LoginComponent},
{path:'signup', component:SignupComponent},
{path:'home', component:HomeComponent},
{path:'help', component:HelpComponent},
{path:'game', component:GameComponent},
{path:'app',component:AppComponent},
{path:'default',component:DefaultLayoutComponent},
{path:'contact',component:ContactComponent},
{path:'details',component:DetailsComponent},
{path:'test',component:TestComponent},
{path:'addContact',component:AddContactComponent},
{path:'**' , component:NotFoundComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
NgOnInit:
ngOnInit(): void {
this.route.queryParamMap.subscribe(
params =>{
const id = params.get('id');
if(id){
this.contactsService.GetContact(id)
.subscribe(
response =>{
this.contact = response;
}
)
}
}
)
}
尝试像这样更改您的 app-routing.component.ts:
{path:'contact/:id',component:ContactComponent},
在“父”组件中,您按下按钮的位置如下所示:
<button [routerLink]="['/contact', contact.id]">Add </button>
然后在 NgOnInit() {} 开头的 contactComponent.ts 中写下:
this.id = this.route.snapshot.paramMap.get('id');
像这样的东西..看看动态路由。 没有演示很难完美地编写工作解决方案。 如果您有时间,请为我们制作 StackBlitz 演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.