如何将数据传递给角度路由组件？

Question

在我的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())

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

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

Answer 1

更新4.0.0

有关更多详细信息，请参阅Angular docs https://Angular.io/guide/router#fetch-data-before-navigating

原件

使用服务是一种方法。在路由参数中，您应该只传递希望反映在浏览器URL栏中的数据。

另请参见https://angular.io/docs/ts/latest/cookbook/component-communication.html#！#双向服务

rc.4附带的路由器重新引入数据

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

另请参阅https://github.com/angular/angular/issues/9757#issuecomment-229847781