Question

我试图通过服务在两个组件之间传递数据。我不知道如何通过其他组件的服务来使用数据。我通过getData（）方法从2. Component获取数据并将其保存到数据变量中。我可以在方法中打印它，但不能在方法之外打印它，我也尝试将它传递给第一个组件。我的代码出了什么问题？

1。组件文件

import {Component, OnInit} from '@angular/core';
import {PassProfileDataService} from '../common/PassProfileDataService';

@Component({

    selector: "profile",
    templateUrl: `client/components/profile/profile.component.html`

})

export class ProfileComponent implements OnInit{
public data;

constructor(private _sharedService: PassProfileDataService){}

ngOnInit() {

this.data = this._sharedService.dataStringSource)
  }

}

2。组件文件

import {Component} from '@angular/core';
import {PassProfileDataService} from '../common/PassProfileDataService';

@Component({

    selector: "search",
    templateUrl: `client/components/search/search.component.html`

})
export class ProfileComponent{

constructor(private _sharedService: PassProfileDataService){}

this._sharedService.getData(data[0].values)
ngOnInit() {

  }

}

第3。 SharedService

import {Component, Injectable} from '@angular/core'

@Injectable()
export class PassProfileDataService {

  public dataStringSource;

  // Service message commands
  getData(data: String) {
    this.dataStringSource  data;

  };

}

Answer 1

据我所知，当您的分析引导您将服务标识为共享时，您应该在应用程序初始化中注册服务：这将允许您访问Angular2应用程序中的相同服务实例。实际上，在app.ts文件中......：

// other import statements...
import { TheNameService } from "./services/the-name.service";
// other import statements...

@Component({
    // other declarations...
    directives: [TheNameService]
    // other declarations...
})

现在在每个需要服务实例的组件中使用import语句导入TheNameService。切记不要在组件的提供者数组中插入TheNameService，否则您将在该组件中获得该服务的新实例!!

这解决了你的一个问题。如果要共享的数据位于服务的公共属性中，则需要进行设置。但是，如果您正在处理使用异步方法的复杂服务，该怎么办？ EventEmitters提供帮助。

在TheNameService中声明一个EventEmitter类型的属性，其中＆＃34;键入＆＃34;是事件发出的数据类型。即。

public myevent$: EventEmitter<string>;

在TheNameService的构造函数中，记得像这样初始化EventEmitter：

this.myEvent$ = new EventEmitter();

每次服务必须在整个应用程序中共享数据时

：

this.myEvent$.emit("This is the emitted text!");

请记住将组件订阅到事件中...将订阅存储在组件的属性中是一种很好的做法，因为我们需要在组件被销毁时取消订阅已侦听的事件。首先在组件上声明一个新的私有属性：

private _myEventSubscription: any; // not sure about what kind of data type is returned here...

在ngOnInit方法中订阅服务事件：

ngOnInit() {
    this._myEventSubscription = this._theNameService.myEvent$.subscribe( (emittedString: string) => {
        console.log(emittedString); // will log "This is the emitted text!" in the console
    });
}

其中this._theNameService是在构造函数中注入依赖项注入的TheNameService（如下所示......）

constructor(private _theNameService: TheNameService) { }

最后要做的事情是，在组件销毁的情况下取消注册订阅：

ngOnDestroy() {
    this._myEventSubscription.unsubscribe();
}

Answer 2

在切换组件时创建保存数据的服务。以下是一个例子。

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

@Injectable()
export class TransfereService {

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  ) { }

  private data;

  setData(data){
    this.data = data;
  }

  getData(){
    let temp = this.data;
    this.clearData();
    return temp;
  }

  clearData(){
    this.data = undefined;
  }

}

现在考虑2个组件Sender和Reciever。

发件人代码：此代码将数据设置为服务并导航到接收者。

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class SenderComponent implements OnInit {         
  constructor(
    private transfereService:TransfereService,
    private router:Router) {}

  somefunction(data){
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 }
}

接收者代码：此代码从服务中提取数据并清除数据。

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class RecieverComponent implements OnInit {  
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) {
      if(this.data){
        // do whatever needed
      }
      else{
        this.router.navigateByUrl('/sender');
      }
   }
}

Angular2通过服务传递数据（两个组件）

2 个答案: