Question

我想使用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。任何帮助将不胜感激。

Answer 1

有一个用于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]
    }
}

Answer 2

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

@Input()会起作用。

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

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

Answer 3

您可以将对象编码为字符串，然后将其传递给查询参数。

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

Answer 4

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

通过routerLink传递对象

4 个答案: