Angular2传递数据以从组件路由

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

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

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

我们的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;
    }
}