angular2事件订阅给未定义

Question

我有发出一个事件如下服务：

@Injectable() 
export class EmitService { 

    private goalId = new Subject<number>(); 

    goalId$ = this.goalId.asObservable(); 

    emitGoalId(goalId: number) { 
    this.goalId.next(goalId); 
    } 
} 

我有一个列表组件，其执行以下操作：

import{ EmitService } from '../../services/emiter.service' 

@Component({ 
selector: 'goal-list', 
templateUrl: './list.html', 
styleUrls: ['./list.scss'], 
providers:[EmitService] 
}) 
export class GoalListComponent implements OnInit { 
    constructor(
     private emitService: EmitService 
     ){} 
editGoals(goalId){ 

     this.editIdeasStepper=true; 

     //emit goaldId so that it can be access in subgoals to load those subgoals 
     this.emitService.emitGoalId(goalId); 

    } 
} 

我有另一组件SubGoalComponent其中预订参加此次活动：

import { EmitService } from '../../services/emiter.service'; 

@Component({ 
selector: 'sub-goal', 
templateUrl: './sub_goal.html', 
styleUrls: ['./sub_goal.scss'], 
providers:[EmitService] 
}) 
export class SubGoalComponent implements OnInit { 
    constructor(
     private elRef:ElementRef, 
     private cdRef:ChangeDetectorRef, 
     private emitService: EmitService 
     ){} 
    ngAfterViewInit() { 

     this.emitService.goalId$.subscribe(
      goalId => { 
       alert(goalId) 
       this.goalId=goalId; 
       alert("Subgoal " + this.goalId) 
     } 
    ) 
    } 
    ngOnInit() { 

    componentHandler.upgradeDom(); 
    this.emitService.goalId$.subscribe(
     goalId => { 

      this.goalId=goalId; 
      alert("Subgoal " + this.goalId) 
     } 
     ) 

    console.log("SubGoal ngOnInIt") 
    console.log("Subgoal " + this.goalId) 
} 

SubGoalComponent is condition盟友加载GoalListComponent's模板如下：

<div *ngIf="showCardListComponent" class="mdl-grid"> 
    <!-- actual card list --> 
    <div class="mdl-cell mdl-cell--2-col"> 
     <div class="goal-list-card mdl-card" *ngFor="let idea of ideas| values; let j = index;"> 
      <div class="mdl-card__title"> 
       <h2 class="mdl-card__title-text">{{idea.Title}}</h2> 
      </div> 
      <div class="mdl-card__actions"> 
       <button (click)="editGoals(j)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
        Edit 
       </button> 
      </div> 
     </div> 
    </div> 
<div class="mdl-cell mdl-cell--10-col" *ngIf="editIdeasStepper"> 

     <ul #editIdeaStepper class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear"> 
      <!-- Sub problems tab --> 
      <li class="mdl-step"> 
       <span class="mdl-step__label"> 
        <span class="mdl-step__title"> 
         <span class="mdl-step__title-text">Sub-problems</span> 
         <span class="mdl-step__title-message">Uncover sub-problems</span> 
        </span> 
       </span> 
       <!-- insert sub-goal component instead of writing html here --> 
       <div class="mdl-step__content"> 
        <sub-goal></sub-goal> 
       </div> 
       <div class="mdl-step__actions"> 

       </div> 
      </li> 
      </ul> 
</div> 

在这里，我警告我得到undefined。为什么会发生？

Answer 1

从组件中删除providers:[EmitService]并将其添加到您的app.module s @NgModule。

@NgModule({ 
    ... 
    providers: [EmitService], 
    ... 
}) 

它undefined的原因是，你是在@Component标注每个组件的初始化他们提供这种服务的不同实例。如果您在包含这些组件的模块中提供它，那么它们将具有相同的此服务实例。