在Angular 2中的兩個組件（頁面）之間傳遞值

Question

我正在使用Angular 2（TypeScript）

我有兩個組件（實際上它們也是兩個頁面）。 他們不是父母和孩子的關系。

當我單擊第一個組件（頁面）中的鏈接時，我想將值傳遞給第二個組件（頁面）。

我通過路由器知道“URL參數”的方式。 但我不想在鏈接中顯示此參數。 還有其他方法嗎？

謝謝！

Answer 1

規范方法是建立injectable注入服務並將服務注入到需要數據的任何組件中。 由於服務是單例，因此組件將訪問相同的數據。 它們在不同的頁面上並不重要。 這里的人物 。

編輯：這是一個更為復雜的示例，通過訂閱服務上的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的最后一個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;
  }
}

確保在app.module.ts文件中僅在'providers'上設置創建的類（myService）並導入可注入文件： 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());
  }
}

我希望這些信息有用！