使用 routerLink 传递对象

Question

我想用 routerLink 传递一个对象。我找到了很多，但没有得到满意的答案。我是 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({});

我想通过按钮 routerLink 将上面的用户对象传递给。

app.module.ts

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

我正在研究 Angular 7。任何帮助将不胜感激。

Answer 1

如果您从另一个组件（父组件）调用一个组件（子组件），

@Input() 会起作用。

你可以像这样传递用户对象。

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

Answer 2

您可以将您的对象编码为字符串并通过查询参数传递它。

component.html

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

component.ts

...

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

...

另一个。component.ts

constructor(private route: ActivatedRoute) {}

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

Answer 3

// 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>

Answer 4

Angular 有一个 npm 包，它扩展了路由器：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]
    }
}

使用 routerLink 传递对象

Pass object with routerLink

angular

typescript

angular-ui-router