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 中反射(reflect)出来？

Answer 1

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

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