Angular：导航到请求的ID

Question

我有一个表格添加一个名称，我想添加用户并使用他的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

因为我只检查是否有这样的名称，然后将其发送到他的URL，并带有ID 但是我不希望现有用户我想要一个新用户，我一旦添加了一个新ID，就会创建它 我只是没有找到所有功能的合适函数

new Edit ：

路由：

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;
            }
          )
        }
      }
    )
}

Answer 1

尝试更改类似的应用程序routing.component.ts.ts：

  {path:'contact/:id',component:ContactComponent},

在“父”组件中，按下按钮会产生这样的内容：

   <button [routerLink]="['/contact', contact.id]">Add </button>

然后在contactcomponent.ts中，在ngoninit（）的开头（）{} {}的开始这样：

this.id = this.route.snapshot.paramMap.get('id');

像这样的东西..看看动态路由。在没有演示的情况下，很难完美地编写工作解决方案。
如果您有时间，为我们制作Stackblitz演示