角2の2つのコンポーネント（ページ）間の値を渡す

Question

角2（タイプスクリプト）を使用しています

私は2つのコンポーネントを持っています（実際には2ページもあります）。彼らは親子関係ではありません。

最初のコンポーネント（ページ）のリンクをクリックすると、2番目のコンポーネント（ページ）に値を渡します。

私はルータを通して「URLパラメータ」を知っています。しかし、私はリンクにこのパラメータを表示したくありません。他の方法はありますか？

ありがとうございました！

Answer 1

標準的な方法は、injectableサービスを確立し、そのサービスをデータが必要なコンポーネントに挿入することです。サービスはシングルトンなので、コンポーネントは同じデータにアクセスします。彼らが別のページにいることは重要ではありません。 Plunker here。

編集：ここではサービスの持つEventEmitterに加入することにより、コンポーネント間の双方向通信を示し、より複雑な例です：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

はあなたにMarkMありがとうございました！すべての

まず： あなたがファイルを作成する必要が だから私はここでそれを説明する...それは動作しますが、私は、角度CLIを使用してdiferentファイルで、最後angular2の上にそれをすべて持っているので、それは私のために困難でしたdata.service.tsと、それは「@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; 
    } 
} 

あなたは一度だけの「プロバイダーの上で作成したクラス（myServiceという）を設定していることを確認しますapp.module.tsファイルを開き、注入可能なファイルをインポートします。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 { } 

あなたが（このオブジェクトは、@Injectableデコレータのおかげで、あなたのコンポーネントに対して一意になります）クラスからオブジェクトを作成するためにコンストラクタを使用して共有クラスを使用したい場合はいつでも。あなたはそれを使用するすべてのファイルにインポートすることを忘れないでください...私の場合は

をこのビューは、テキスト入力を持つオブジェクトのデータを設定しています！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()); 
    } 
} 

とで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()); 
    } 
} 

私はこの情報が便​​利です願っています：このビューには、私はちょうどオブジェクトに設定されているデータを参照してください！