在 Angular 2 中的两个组件（页面）之间传递值

Question

我正在使用 Angular 2 (TypeScript)

我有两个组件（实际上它们也是两个页面）。他们不是父子关系。

我想在单击第一个组件（页面）中的 link 时将值传递给第二个组件（页面）。

我知道 "URL parameters" 通过路由器的方式。但我不想在 link 中显示此参数。还有其他办法吗？

谢谢！

Answer 1

规范的方法是建立一个injectable服务并将该服务注入到任何需要数据的组件中。由于该服务是单例的，因此组件将访问相同的数据。他们在不同的页面上应该无关紧要。 Plunker here.

Edit: Here's a more involved example that shows two-way communication between components by subscribing to an eventEmitter on a service: 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！它有效，但对我来说很难，因为我把它全部放在不同的文件中，最后 angular2 使用 angular cli...所以我在这里解释一下：

首先：您需要使用要与其他组件共享的 class 创建一个文件：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' 上设置创建的 class (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 { }

无论您想在何处使用共享 class，都可以使用构造函数从 class 创建一个对象（由于 @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());
  }
}

希望此信息有用！

在 Angular 2 中的两个组件（页面）之间传递值

Passing value between two components (pages) in Angular 2

typescript

angular

angular2-routing