在我的Angular 2路由模板之一(FirstComponent)中，我有一个按钮
first.component.html
<div class="button" click="routeWithData()">Pass data and route</div>
我的目标是:
按钮点击->路由到另一个组件，同时保留数据，而不使用另一个组件作为指令。
这是我试过的…
1号的方法
在同一个视图中，我根据用户交互存储收集相同的数据。
first.component.ts
export class FirstComponent {
constructor(private _router: Router) { }
property1: number;
property2: string;
property3: TypeXY; // this a class, not a primitive type
// here some class methods set the properties above
// DOM events
routeWithData(){
// here route
}
}
通常我会通过
this._router.navigate(['SecondComponent']);
最终传递数据
this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);
而带有参数的链接的定义将是
@RouteConfig([
// ...
{ path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent}
)]
这种方法的问题是，我猜我不能在url中传递复杂的数据(例如property3这样的对象);
2方法
另一种方法是在FirstComponent中包含SecondComponent作为指令。
<SecondComponent [p3]="property3"></SecondComponent>
然而，我想路由到该组件，不包括它!
第三个方法
我在这里看到的最可行的解决方案是使用一个服务(例如FirstComponentService)来
将数据(_firstComponentService.storeData())存储在FirstComponent的routeWithData()上
在SecondComponent的ngOnInit()中检索数据(_firstComponentService.retrieveData())
虽然这种方法似乎完全可行，但我想知道这是否是实现目标的最简单/最优雅的方法。
一般来说，我想知道我是否错过了在组件之间传递数据的其他潜在方法，特别是在代码量可能较少的情况下
第三种方法是在组件之间共享数据的最常用方法。您可以在相关组件中注入您想要使用的项目服务。
import { Injectable } from '@angular/core';
import { Predicate } from '../interfaces'
import * as _ from 'lodash';
@Injectable()
export class ItemsService {
constructor() { }
removeItemFromArray<T>(array: Array<T>, item: any) {
_.remove(array, function (current) {
//console.log(current);
return JSON.stringify(current) === JSON.stringify(item);
});
}
removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
_.remove(array, predicate);
}
setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
var _oldItem = _.find(array, predicate);
if(_oldItem){
var index = _.indexOf(array, _oldItem);
array.splice(index, 1, item);
} else {
array.push(item);
}
}
addItemToStart<T>(array: Array<T>, item: any) {
array.splice(0, 0, item);
}
getPropertyValues<T, R>(array: Array<T>, property : string) : R
{
var result = _.map(array, property);
return <R><any>result;
}
getSerialized<T>(arg: any): T {
return <T>JSON.parse(JSON.stringify(arg));
}
}
export interface Predicate<T> {
(item: T): boolean
}
<div class="button" click="routeWithData()">Pass data and route</div>
在angular 6或其他版本中，我希望最简单的方法是用你想要传递的数据量定义你的路径
{path: 'detailView/:id', component: DetailedViewComponent}
正如你可以从我的路由定义中看到的，我已经添加了/:id来支持我想通过路由器导航传递给组件的数据。因此，您的代码将看起来像
<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>
为了读取组件上的id，只需导入ActivatedRoute like
import { ActivatedRoute } from '@angular/router'
在ngOnInit上是你检索数据的地方
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
});
console.log(this.id);
}
你可以在这篇文章中阅读更多
https://www.tektutorialshub.com/angular-passing-parameters-to-route/
