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

另一種方法是使用這兩個組件之間的公共服務的主題和訂閱。我按照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); 
} 

而在你的子組件，它已經認購到數據：

export class ChildComponent implements OnInit { subscription：Subscription; id：string;

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

}