Angular2将数据传递到与组件的路线

Question

我需要将数据从一个组件传递到另一个组件，我只找到了用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中反映它？

Answer 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;
    }
}

Answer 2

另一种做到这一点的方法是与两个组件之间的公共服务订阅。我一直都在此操作术语，以按照此处描述的模式进行。

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

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 ininit { 订阅：订阅； id：字符串;

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