Angular2从组件传递数据到路由答案

【问题标题】：Angular2 pass data to route from componentAngular2从组件传递数据到路由
【发布时间】：2017-05-07 03:31:33
【问题描述】：

我需要将数据从一个组件传递到另一个组件，我发现只有在 url 中使用路由参数的方法：

所以我对路由器中的目标组件进行了这样的配置：

{
    path: 'edit-tags/:type/:name/:id',
    component: EditTagsComponent,
},

我从另一个组件中使用它：

this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`], { relativeTo: this.route });

它工作正常，但我不想在 url 中显示id，还需要向组件传递更多数据。

我还看到在路由器中使用类似的配置：

{ path: 'test-product', component: ProductsContentComponent, data: { role: 'admin', type: 'test-product' } }

但我还没有找到在另一个组件中使用相同方法的示例。

那么，有没有办法在路由上将一些数据从一个组件传递到另一个组件，而不在 url 中反映呢？

【问题讨论】：

查看optional route parameters 和NavigationExtras。不过，不确定您是否可以阻止数据显示在地址栏中。
angular.io/docs/ts/latest/cookbook/component-communication.html

标签： angular angular2-routing angular2-components

【解决方案1】：

我们的 Web 应用程序需要相同的解决方案，我们采用了通过服务将数据从一个组件传递到另一个组件的方法。这样，敏感数据就不会在 URL 中表达。这是我们第一个显示数据列表的组件。我们关注的主要方法是 changeRoute 方法。在路由改变之前，我们将当前选中的数据保存到dataService中，然后进行路由改变。

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";

import { DataService } from "./data.service";
import { Data } from "../../models/data.model";

@Component({
selector: "ei-data-list",
template: require("./data-list.component.html")
})
export class DataListComponent implements OnInit {
    constructor(private dataService: DataService, private router: Router) {}

    // .... code for properties and getting data here

    changeRoute(data: Data) {
        this.dataService.data = data;
        this.router.navigate(["/data-list/data-item"]);
    }
}

这是我们构建的数据服务。对于这个示例，我们将其进行了微调。

import { Injectable } from "@angular/core";
import { Data } from "../../models/data.model";

@Injectable()
export class DataService {
    constructor() { }

    public data: Data;
}

最后我们有了第二个组件，我们正在传递数据。在 ngOnInit 内部，我们正在收集数据，以便在页面加载时准备好。我希望这会有所帮助。

import { Component } from "@angular/core";
import { DataService } from "./data.service";

@Component({
    selector: "ei-data-item",
    template: require("./data.component.html")
})
export class DataComponent {
    constructor(private dataService: DataService) {}
    data: Data;

    ngOnInit() {
        this.data = this.dataService.data;
    }
}

【讨论】：

我很困惑为什么在您的DataComponent 中您的服务与DataListComponent 中的不同。如果您在它们之间共享变量，它们不应该相同吗？此外，没有this.DataService，所以我不确定您的ngOnInit() 将如何工作。也就是说，按照我的意思编码时，数据变量返回未定义。
抱歉，我的编辑还没有完成。谢谢你指出这一点。我已经做出了改变，希望它现在更有意义。如果它仍然不适合你，请告诉我。
@aholtry 什么是Data（在../../models/data.model 内）？看起来像一些组件类还是一些model？
是的，它是一个模型类。这只是为了表示正在检索的数据。如果需要，您也可以在此处使用“any”关键字。前任。数据：任何；

【解决方案2】：

另一种方法是使用两个组件之间的公共服务的主题和订阅。我一直按照here 描述的模式搜索字词。

在你的服务中，你会有类似的东西：

export class MyService {
    private searchStringSubject = new Subject<string>();

    searchAnnounced$ = this.searchStringSubject.asObservable();

    announceSearch(searchValue: string) {
        this.searchStringSubject.next(searchValue);
    }
...
}

并且在您的父组件中有事件驱动数据：

public onSelectSearchValue(e: TypeaheadMatch): void {
    this.chipService.announceSearch(e.item.id);
}

在您的子组件中，让它订阅数据：

导出类 ChildComponent 实现 OnInit { 订阅：订阅； id：字符串；

constructor(private _service: MyService) {
    this.subscription = _service.searchAnnounced$.subscribe(
        id => {
            this.id = id;
            this.query();
        });

}

【讨论】：