angular - Skicka objekt med routerLink

Jag ville skicka ett objekt med routerLink. Jag hittade mycket men fick inget tillfredsställande svar. Jag är ny på Angular.

user.component.html

<button type="button" routerLink="/admin">Add Event</button>

user.component.ts

export class UserComponent implements OnInit {

  @Input()
  public user: UserOperator = new UserOperator({});

Jag ville skicka ovanstående användarobjekt med knappens routerLink.

app.module.ts

const appRoutes: Routes = [
  { path: 'admin', component: AdminComponent },
]

Jag arbetar med Angular 7. All hjälp skulle vara mycket uppskattad.

Svar #1

Du kan koda ditt objekt till strängen och skicka det genom frågeparametrarna.

komponent.html

<button type="button" [routerLink]="[getLink()]">Add Event</button>

component.ts

...

getLink(): string {
    return `/admin?state=${btoa(JSON.stringify(this.user))}`;
}

...

another.component.ts

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
   this.route.queryParams.subscribe(params => { 
       let user = new UserOperator(JSON.parse(atob(params['state']))); 
   });
}

Svar #2

Det finns ett npm-paket för Angular som utökar routern: angular2-navigate-with-data

https://www.npmjs.com/package/angular2-navigate-with-data

Jag använder det med Angular 6 och är ganska säker på att det också fungerar med 7. Exempel på användning:

importera paket i app.module-fil: import "angular2-navigate-with-data";

import {Router} from '@angular/router';

class PageOne {
    constructor (private router: Router){}

    public redirect() {
        this.router.navigateByData({
            url: ["/PageTwo"],
            data: [1,2,3,4,5], //data - <any> type
            //extras: {} - <NavigationExtras> type, optional parameter
        });
    }
}


import {Router} from '@angular/router';
import {OnInit} from "@angular/core";

class PageTwo implements OnInit {
    constructor (private router: Router){}

    public ngOnInit() {
        console.log(this.router.getNavigatedData()); //output [1,2,3,4,5]
    }
}