Truyền giá trị giữa hai thành phần (trang) trong Angular 2

Question

Tôi đang sử dụng Angular 2 (TypeScript)

Tôi có hai thành phần (thực ra chúng cũng là hai trang). Họ KHÔNG phải là mối quan hệ cha mẹ và con cái.

Tôi muốn chuyển giá trị cho thành phần thứ hai (trang) khi tôi nhấp vào liên kết trong thành phần đầu tiên (trang).

Tôi biết "thông số URL" thông qua bộ định tuyến. Nhưng tôi không muốn hiển thị thông số này trong liên kết. Còn cách nào khác không?

Cảm ơn bạn!

Answer 1

Cách kinh điển là thiết lập dịch vụ injectable và đưa dịch vụ vào bất kỳ thành phần nào cần dữ liệu. Vì dịch vụ là một singleton, các thành phần sẽ truy cập vào cùng một dữ liệu. Nó không quan trọng là họ đang ở trên các trang khác nhau. Plunker here.

Edit: Dưới đây là một ví dụ tham gia nhiều hơn cho thấy thông tin liên lạc hai chiều giữa các thành phần bằng cách đăng ký một eventEmitter trên một dịch vụ: Plunker

import {Component, Injectable} from 'angular2/core' 

// your shared service 
// provide reference in parent component or bootstrap 
@Injectable() 
export class myService { 
    sharedData:string = "String from myService" 
} 

@Component({ 
    selector: 'page1', 
    providers: [], 
    template: ` 
    <div> 
     <b>Component Page1 - shared data:</b> {{SharedData}} 
    </div> 
    `, 
    directives: [], 
}) 
export class Page1 { 
    constructor(aService: myService) { 
    this.SharedData = aService.sharedData 
    } 
} 

@Component({ 
    selector: 'page2', 
    providers: [], 
    template: ` 
    <div> 
     <b>Component Page2 - shared data:</b> {{SharedData}} 
    </div> 
    `, 
    directives: [], 
}) 
export class Page2 { 
    constructor(aService: myService) { 
    this.SharedData = aService.sharedData 
    } 
} 

Answer 2

Cảm ơn bạn MarkM! Nó hoạt động, nhưng nó đã được khó khăn cho tôi bởi vì tôi có tất cả trong các tập tin khác nhau và trên angular2 cuối cùng bằng cách sử dụng cli góc ... Vì vậy, tôi giải thích nó ở đây:

Trước hết: Bạn cần tạo tệp với lớp bạn muốn chia sẻ với các thành phần khác: data.service.ts và làm cho nó "@Injectable":

import { Injectable } from '@angular/core'; 

@Injectable() 
export class myService { 
    public sharedData:string; 

    constructor(){ 
    this.sharedData = "String from myService"; 
    } 

    setData (data) { 
    this.sharedData = data; 
    } 
    getData() { 
    return this.sharedData; 
    } 
} 

hãy chắc chắn rằng bạn thiết lập các lớp tạo (MyService) trên 'cung cấp' chỉ một lần vào tệp app.module.ts và nhập tệp tiêm: data.service.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { routing, appRoutingProviders } from './app.routing'; 
import { AppComponent } from './app.component'; 
import { AppContent } from './components/content.component'; 
import { AppInsertContent } from './components/insert.component'; 
import { myService } from './services/data.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    AppContent, 
    AppInsertContent, 
    ], 
    imports: [ 
    BrowserModule, 
    routing 
    ], 
    providers: [appRoutingProviders, myService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Bất cứ nơi nào bạn muốn sử dụng lớp chia sẻ của bạn sử dụng các nhà xây dựng để tạo ra một đối tượng từ lớp (đối tượng này sẽ là duy nhất cho các thành phần của bạn, nhờ vào sự trang trí @Injectable). Hãy nhớ để import nó trên tất cả các tập tin bạn sử dụng nó ...

Trong trường hợp của tôi quan điểm này đặt ra các dữ liệu của đối tượng với một đầu vào văn bản: input.component.ts

import { Component } from '@angular/core'; 
import { myService } from '../services/data.service'; 

@Component({ 
    selector: 'insert-content', 
    template: ` 
    <input id="textbox" #textbox type="text"> 
    <button (click)="this._myService.setData(textbox.value); SharedData = textbox.value;">SAVE</button> 
    Object data: {{SharedData}} 

    <div class="full-button"> 
     <a routerLink="/" routerLinkActive="active">BACK</a> 
    </div> 
    ` 
}) 

export class AppInsertContent { 
    SharedData: string; 
    constructor (private _myService: myService){ 
    console.log(this._myService.getData()); 
    } 
} 

Và trong quan điểm này tôi chỉ thấy các dữ liệu đã được thiết lập trên đối tượng: content.component.ts

import { Component } from '@angular/core'; 
import { myService } from '../services/data.service'; 

@Component({ 
    selector: 'app-content', 
    template: ` 
    <div style="float:left; clear:both;"> 
    {{_myService.getData()}} 
    </div> 

    <div class="full-button"> 
    <a routerLink="/insert" routerLinkActive="active">INSERT</a> 
    </div> 
    ` 
}) 
export class AppContent { 
    constructor (private _myService: myService){ 
    console.log(this._myService.getData()); 
    } 
} 

tôi hy vọng thông tin này rất hữu ích!