如何将数据传递到Angular路由组件? [英] How do I pass data to Angular routed components?

问题描述

在Angular 2路线的模板之一( FirstComponent )中，我有一个按钮

In one of my Angular 2 routes's templates (FirstComponent) I have a button

first.component.html

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

我的目标是要实现:

单击按钮->路由到另一个组件，同时保留数据并且不使用另一个组件作为指令.

Button click -> route to another component while preserving data and without using the other component as a directive.

这就是我尝试过的...

This is what I tried...

第一种方法

在同一视图中，我存储的是基于用户交互的数据.

In the same view I am storing collecting same data based on user interaction.

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 }]);

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

whereas the definition of the link with parameters would be

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

此方法的问题在于，我猜我无法在URL中传递复杂数据(例如，像property3这样的对象)；

The issue with this approach is that I guess I can't pass complex data (e.g. an object like property3) in-url;

第二种方法

另一种选择是在FirstComponent中将SecondComponent作为指令.

An 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方法

我在这里看到的最可行的解决方案是将 Service (例如FirstComponentService)用于

The most viable solution I see here would be to use a Service (e.g. FirstComponentService) to

• 在中将数据(_firstComponentService.storeData())存储在routeWithData()上
• 检索 SecondComponent
中 ngOnInit()中的数据(_firstComponentService.retrieveData())

• store the data (_firstComponentService.storeData()) on routeWithData() in FirstComponent
• retrieve the data (_firstComponentService.retrieveData()) in ngOnInit() in SecondComponent

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

While 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

推荐答案

更新4.0.0

有关更多详细信息，请参见Angular文档. https://angular.io/guide/路由器#fetch-data-before导航

See Angular docs for more details https://angular.io/guide/router#fetch-data-before-navigating

原始

使用服务是必经之路.在路径参数中，您只应传递要在浏览器URL栏中反映的数据.

Using 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.

另请参见 https://angular. io/docs/ts/latest/cookbook/component-communication.html#！#bidirectional-service

RC.4附带的路由器重新引入了data

The router shipped with RC.4 re-introduces data

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

这篇关于如何将数据传递到Angular路由组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！