使用Service在组件angular2之间传递数据

时间:2017-01-31 11:34:16

标签: angular

我使用服务

在两个组件之间传递数据

UserComponent

onSubmit(username:string){
    this.dataService.push(this.user);
    this.navigate();
}

navigate(){
    this.router.navigate(['question']);
}

问题组件

import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
import { DataService } from '.././services/data.service';

@Component({
  moduleId: module.id,
  selector: 'question',
  templateUrl: 'question.component.html',
})
export class QuestionComponent {
name : string;
constructor(private dataService: DataService, private renderer: Renderer) {

  }
  ngOnInit() {
    console.log("Here");
    this.dataService.pushData.subscribe((data:any) => this.name = data);
  }

服务

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

@Injectable()
export class DataService{
    pushData = new EventEmitter<string>();

    push(value:string){
        console.log("In Service");
        this.pushData.emit(value);
    }
}

}

但是我能够在问题组件中获取数据而在控制台中没有错误

1 个答案:

答案 0 :(得分:2)

  1. 您已加载UserComponent并将某些数据推送到该服务。
  2. 该服务为那些对数据推送感兴趣的人发起一个事件
  3. 您导航并加载QuestionComponent
  4. QuestionComponent然后订阅服务事件(太晚
  5. 长话短说:第2步发生在第4步之前,因此步骤4s推送数据的事件处理程序永远不会触发,它开始听得太晚(在事件被调用之后)。

    修改

    你可能正在寻找的东西(我事后认识)是在导航过程中将参数传递给你的组件,即。路线中的参数。如果这就是您需要的全部服务,则可以使用路由类型传递它们并在组件中将其读回。

    请参阅Routing & Navigation

    上的文档

    <强> UserComponent

    navigate(){
        this.router.navigate(['question', {user: this.user}]);
    }
    

    <强> QuestionComponent

    import { ActivatedRoute  } from '@angular/router';
    constructor(private route:ActivatedRoute) {
    }
    
    ngOnInit(): void {
        const user = this.route.snapshot.params['user'];
    }