在我的Angular 2路由的一个模板（FirstComponent）中，我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是实现：

按钮点击->route to另一个组件，同时保留数据，而不使用另一个组件作为指令。

这是我试过的...

第一种方法

在同一个视图中，我存储、收集基于用户交互的相同数据。

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

通常通过ID路由到SecondComponent

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带有参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

这种方法的问题是,我想我不能在-URL中传递复杂的数据（例如,property3这样的对象）；

第二种方法

另一种方法是将SecondComponent作为指令包含在FirstComponent中。

  <SecondComponent [p3]="property3"></SecondComponent>

但是我想要路由到那个组件，而不是包含它！

第三种方法

我在这里看到的最可行的解决方案是使用服务（例如，FirstComponentService）来

• 在FirstComponent中存储routeWithData（）上的数据(_FirstComponentService.StoreData())
• 在SecondComponent中检索ngOnInit（）中的数据(_FirstComponentService.RetrieveData())

虽然这种方法似乎完全可行，但我想知道这是否是实现目标的最简单/最优雅的方法。

一般来说，我想知道我是否遗漏了在组件之间传递数据的其他潜在方法，特别是在代码量较少的情况下