angular2 Ereignis abonnieren gibt undefined

Question

Ich habe eine Dienstleistung, die ein Ereignis wie folgt abgibt:

@Injectable() 
export class EmitService { 

    private goalId = new Subject<number>(); 

    goalId$ = this.goalId.asObservable(); 

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

ich eine List-Komponente haben, die macht folgendes:

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

    } 
} 

Ich habe eine andere Komponente SubGoalComponent, die abonniert zu dieser Veranstaltung:

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 ist Bedingung Verbündete in GoalListComponent's Vorlage wie folgt geladen:

<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> 

Hier in meinem Alarm I undefined bekommen. Warum passiert es?

Answer 1

Entfernen Sie providers:[EmitService] aus den Komponenten und fügen Sie es zu Ihrem app.module s @NgModule hinzu.

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

Der Grund ist es undefined ist, dass man verschiedene Instanzen dieses Dienstes anbieten, indem sie in der @Component Kommentierung der einzelnen Komponenten zu initialisieren. Wenn Sie es in einem Modul bereitstellen, das diese Komponenten enthält, wird dieselbe Instanz dieses Dienstes verwendet.