Question

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

@Injectable()
export class EmitService {

  private goalId = new Subject<number>();

  goalId$ = this.goalId.asObservable();

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

我有一个List组件，它执行以下操作：

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在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 @NgModule。

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

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

angular2事件订阅给出undefined

1 个答案: