用routerLink传递对象
用routerLink传递对象
提问于 2019-05-24 09:34:46
我想用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 },
]我的工作角度7。任何帮助将不胜感激。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-24 11:15:15
有一个npm包用于扩展路由器: Angular 2-带数据导航。
https://www.npmjs.com/package/angular2-navigate-with-data
我使用它的角度为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]
}
}Stack Overflow用户
发布于 2019-05-24 09:48:42
您可以将对象编码到字符串中，并通过查询参数传递它。
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'])));
});
}Stack Overflow用户
发布于 2019-05-24 09:45:26
如果您从另一个组件(父组件)调用组件(子组件)，则@Input()可以工作。
您可以像这样传递用户对象。
<child-component [user]="userObject"></child-component>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56289773
复制相关文章
相似问题
腾讯云开发者
