解决方案 update 4.0.0有关更多详细信息，请参阅 Angular 文档 https://angular.io/guide/router#fetch-data-before-navigating原创使用服务是一种方法.在路由参数中，您应该只传递您希望反映在浏览器 URL 栏中的数据.另见 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-serviceRC.4 附带的路由器重新引入了dataconstructor(private route: ActivatedRoute) {}const 路由:RouterConfig = [{path: '', redirectTo: '/heroes', pathMatch : 'full'},{路径:'英雄'，组件:HeroDetailComponent，数据:{some_data:'一些值'}}];class HeroDetailComponent {ngOnInit() {this.sub = this.route.数据.subscribe(v => console.log(v));}ngOnDestroy() {this.sub.unsubscribe();}}另请参阅 https://github.com/angular/angular 上的 Plunker/issues/9757#issuecomment-229847781In one of my Angular 2 routes's templates (FirstComponent) I have a buttonfirst.component.html<div class="button" click="routeWithData()">Pass data and route</div>My goal is to achieve:This is what I tried...1ST APPROACHIn the same view I am storing collecting same data based on user interaction.first.component.tsexport 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 }}Normally I'd route to SecondComponent by this._router.navigate(['SecondComponent']);eventually passing the data by this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);whereas the definition of the link with parameters would be @RouteConfig([ // ... { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent})]The issue with this approach is that I guess I can't pass complex data (e.g. an object like property3) in-url;2ND APPROACHAn alternative would be including SecondComponent as directive in FirstComponent. <SecondComponent [p3]="property3"></SecondComponent>However I want to route to that component, not include it!3RD APPROACHThe most viable solution I see here would be to use a Service (e.g. FirstComponentService) tostore the data (_firstComponentService.storeData()) on routeWithData() in FirstComponentretrieve the data (_firstComponentService.retrieveData()) in ngOnInit() in SecondComponentWhile this approach seems perfectly viable, I wonder whether this is the easiest / most elegant way to achieve the goal.In general I'd like to know whether I'm missing other potential approaches to pass the data between components, particularly with the less possible amount of code 解决方案 update 4.0.0See Angular docs for more details https://angular.io/guide/router#fetch-data-before-navigatingoriginalUsing a service is the way to go. In route params you should only pass data that you want to be reflected in the browser URL bar.See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-serviceThe router shipped with RC.4 re-introduces dataconstructor(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(); }}See also the Plunker at https://github.com/angular/angular/issues/9757#issuecomment-229847781 这篇关于如何将数据传递给 Angular 路由组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
