無法使用Angular服務在兩個angular 4組件之間傳遞數據

Question

無法使用服務將數據從一個角度組件傳遞到另一角度組件。 服務代碼如下：

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

@Injectable()
export class DataService {
  public serviceData: string;
}

這是組件home ：

import {Component, OnInit, Input} from '@angular/core';
import {Router} from "@angular/router";
import { DataService } from '../common/common.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(public router: Router, public commonService: DataService) {
    this.commonService.serviceData = 'Message from Home Component to App Component!';
    this.router.navigate(["overview"]);
  }

}

這是概述組件：

import {Component, OnInit, Input} from '@angular/core';
import { DataService } from '../common/common.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.css']
})
export class OverviewComponent {
  constructor(public messageService: DataService) {
    alert(this.messageService.serviceData);
  }
}

OverviewComponent的警報始終顯示undefined 。

Answer 1

由於您已經在組件級別注入了DataService提供程序，因此該實例將從當前組件共享給后代注入器樹。 因此，在這種情況下，您的app-home和app-overview DataService實例將有所不同，換句話說，Angular將為DataService創建兩個不同的實例。

建議的做法是在根模塊providers元數據選項上注冊可共享的數據提供程序，以便每個使用者都可以訪問同一實例。 確保從組件級別providers元數據選項中刪除DataService 。

@NgModule({
  imports: [..],
  declarations: [AppComponent, ...],
  providers: [DataService, ...], //<- moved here
  bootstrap: [AppComponent]
})
export class AppModule {

}

Answer 2

我建議您使用rxjs主題。 像這樣在您的服務中創建新的rxjs主題

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {

    myNewSubject = new Subject<any>();

    informDataChanges(passyourobject){
      this.myNewSubject.next(passyourobject);
  }

}

當您的組件發生更改時，或者您要將數據傳遞給另一個組件時，只需從您的組件中調用此服務函數，然后將數據作為參數傳遞給該函數。 你可以用這樣的東西做

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

    @Component({
      selector: 'app-some',
      templateUrl: './some.component.html',
      styleUrls: ['./some.component.css']
    })
    export class SomeComponent implements OnInit {

      constructor( private myService: MyService) { }

      someFunction(){
        this.myService.informLogout('somedata');//Passing data to service here
      }

  ngOnInit() {

  }

}

現在，您需要做的就是在另一個組件中訂閱該數據。 重要主題會隨時監視它的任何更改，並且數據將連續不斷流並將自動訂閱。 因此，最好在構造函數中訂閱該主題，更改將立即反映在該組件中。

你用這樣的東西做

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

        @Component({
          selector: 'app-another',
          templateUrl: './another.component.html',
          styleUrls: ['./another.component.css']
        })
        export class AnotherComponent implements OnInit {

          constructor( private myService: MyService) {
            this.myService.myNewSubject.subscribe(data=>{
             console.log(data);
       }) 
}

這樣，您可以輕松地在任意數量的組件之間傳遞數據。