Angular：导航到请求的 ID

Question

I have a form for adding a name I want to add the user and navigate to the next page with his id. for example:

And on the page I get navigation to another page with Url:

http://localhost:4200/contact?id=5b07d5ec-627b-45f6-8361-becb9a742d40

I have a problem with one line of code:

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

In this function the problematic line of code is:

const contact = res.find((a:any)=>{
return a.displayName === this.contactForm.value.displayName

Because I only check if I have such a Name then send it to his URL with the ID But I do not want an existing user I want a new user I create it as soon as I do ADD get a new ID I just did not find a suitable function of all the functions

New Edit :

Routing:

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

Try to change your app-routing.component.ts like this:

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

And in the "parent" component, where you press the button make something like this:

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

and then in the contactComponent.ts in the beginning of the NgOnInit() {} write this:

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

Something like this.. Look at the dynamic routing. Its hard to perfectly write working solution without demo. If you have time, make StackBlitz demo for us