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

Question

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

first.component.html

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

我的 目标 是实现：

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

这是我试过的…

第一种方法

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

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 这样的 对象）；

第二种方法

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

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

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

第三种方法

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

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

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

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

原文由 dragonmnl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 4.0.0

有关更多详细信息，请参阅 Angular Angular Router - 在导航之前获取数据。

原来的

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

请参阅 Angular Angular Cookbook 组件通信 - 双向服务。

RC.4附带的路由器重新引入 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();
  }
}

另请参阅 Plunker 。

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您有一个公式集合来处理几个 ng 组件，这些组件基于类对象的集合/数组构建，大约保存。 10 个道具，例如包括输入值、标称值以及至少单位和布尔值……，因此要保持页面状态（输入+结果）会重复很多东西。

因此，我通过使用 *ngif 来模拟路由来显示单个页面的相关部分（组件），但从不更改 url。

 <div *ngIf="visibleComponentA>
... All part of ComponetA
  ></div>

CpmponetA.html

 <div *ngIf="visibleComponentB>
... All part of ComponetB
  ></div>

CpmponetB.html

这个布尔值将在组件的相关代码中设置：

 @Input()visibleComponentA: boolean = true;

组件A.ts

现在在首页

<div (click)="OnClickNav(visibleComponentA)" >ComponentA</div>
<div (click)="OnClickNav(visibleComponentB)" >ComponentB</div>

app.component.html

和方法 OnClickNav(Selected:NavFlags) 切换组件的正确可见状态。

 OnClickNav(Selected:NavFlags){

    Selected.NavStatus=!Selected.NavStatus

    Selected.NavItem=='visibleComponetA'? this.visibleComponetA.NavStatus=Selected.NavStatus: this.visibleComponetA.NavStatus= false;
    Selected.NavItem=='visibleComponetB'? this.visibleComponetB.NavStatus=Selected.NavStatus: this.visibleComponetB.NavStatus= false;

应用程序.commonet.ts

NavFlags 类很简单

export class NavFlags {
  NavItem: string = '';
  NavStatus: boolean = false;

  constructor(NavItem: string, NavStatus: boolean) {
    this.NavItem = NavItem;
    this.NavStatus = NavStatus;
  }
}

导航标志.ts

这样，“个人”页面不会留下任何数据丢失。我没有重复的商店。完整的示例可以在 https://angulartool.de 上访问。通过单击该按钮，可以在组件中浏览页面而不会丢失数据。

这个hack并不完美，所以也许会有更好的方法来解决这个角度问题。

原文由 JuergenG 发布，翻译遵循 CC BY-SA 4.0 许可协议