Передать объект с routerLink - PullRequest
Новая
       11

Передать объект с routerLink

0 голосов
/ 24 мая 2019

Я хотел передать один объект с routerLink.Я нашел много, но не получил никакого удовлетворенного ответа.Я новичок в угловой.

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

Я хотел передать вышеуказанный пользовательский объект кнопке routerLink.

app.module.ts 

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

Я работаю над Angular 7. Любая помощь будетс благодарностью.

Ответы [ 4 ]

1 голос
/ 24 мая 2019

Существует пакет npm для Angular, расширяющий маршрутизатор: angular2-navigate-with-data

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

Я использую его с Angular 6 и почти уверен, что он работает и с 7. Пример использования:

пакет импорта в файле app.module: 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]
    }
}
0 голосов
/ 24 мая 2019

Вы можете закодировать ваш объект в строку и передать его через параметры запроса.

component.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']))); 
   });
}
0 голосов
/ 24 мая 2019 
// import routes
import { Routes, Router, ActivatedRoute } from '@angular/router';

// define route in construct

// app.module set route
const appRoutes: Routes = [
  { path: 'admin\:obj', component: AdminComponent },
]

//make function in ts
redirect(){
    this.router.navigateByUrl('/admin/'+user);
}

// your button
<button type="button" (click)="redirect()">Add Event</button>
0 голосов
/ 24 мая 2019

@Input() работает, если вы вызываете компонент (дочерний компонент) из другого компонента (родительского компонента.

. Пользовательский объект можно передать следующим образом. 

<child-component [user]="userObject"></child-component>
...