代码之家 › 专栏 › 技术社区 › iJade

无法使用角度服务在两个角度4组件之间传递数据

angular-services components angular

iJade · 技术社区 · 7 年前

无法使用服务将数据从一个角度组件传递到另一个角度组件。以下是服务代码:

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

2 回复 | 直到 7 年前

Pankaj Parkar 7 年前

既然你注射了 DataService 的实例 app-home app-overview 也就是说,角度不同会产生两个不同的实例

providers 元数据选项,以便每个使用者都可以访问相同的实例。确保删除 数据服务 供应商 元数据选项。

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

}

Dhaanappagouda Patil 6 年前

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);
       }) 
}