Question

我正在使用Angular 2（TypeScript）

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

当我点击第一个组件（页面）中的链接时，我想将值传递给第二个组件（页面）。

我通过路由器知道“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的最后一个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()); } }

我希望这些信息有用！

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

2 个答案: