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標註每個組件的初始化他們提供這種服務的不同實例。如果您在包含這些組件的模塊中提供它，那麼它們將具有相同的此服務實例。