带参数的角路由

Question

I am trying to implement an edit button, where it should navigate to the page that is meant to be edited. I know that parameterised Routes should be used, but I am not sure how exactly it should be implemented in relation to this code? could someone please come with a suggestion or links of tutorials that I can solve my problem as well as I want to learn more in depth about Routing in Angular later on. I did read the Angular documentation on Routing, but it didn't help me much.

export interface FileModel {
  Id?: Array<string>;
  dbList?: Array<string>;
  name?: string;
}

export interface File {
  fileId?: number;
  name?: string;
  dbList?: string;
}

public editFile: FileModel  = {};

      edit(file: File){
         this.editFile.dbList = file.dbList.split(',');
         this.editFile.name = file.name;

         // navigate and send

      }

Answer 1

Firstly you need to inject the Router in the constructor:

constructor(private router: Router) {}

Then in your code where you would like to navigate do something like this:

this.router.navigate([`/navigateUrlPart/${file.id}`]);

And of course you should create a routing in your AppRoutingModule to keep it working together

const routes: Routes = [
    ...
    { navigateUrlPart/:id', component: YourEditComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes})],
    exports: [RouterModule]
})
export class AppRoutingModule { }

And in the YourEditComponent you can read the edited id from the route params using the ActivatedRoute class