子組件無法通過該服務訂閱EventEmitter

Question

訂閱組件 「彈出list.component.ts」：

import { Component, OnInit } from '@angular/core'; 
import { ChildCommService } from '../child-comm.service'; 

@Component({ 
selector: 'app-pop-list', 
templateUrl: './pop-list.component.html', 
styleUrls: ['./pop-list.component.css'], 
providers: [ChildCommService] 
}) 

export class PopListComponent implements OnInit { 
recievedItem: any; 
constructor(private _childService: ChildCommService) { } 
ngOnInit() { 

this._childService.popItemSelected 
.subscribe(
(itemToPop) => { 
this.recievedItem = itemToPop; 
} 
); 
} 
} 

訂閱組件的HTML：

<hr style="width: 300px;"> 
<h3>Popped Content</h3> 
<div style="border: 2px; background-color:lightgrey ; width:300px;"> 
<ul> 
<li>{{recievedItem}}</li> 
</ul> 
</div> 

的服務「 ChildCommService.service.ts「：

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

@Injectable() 
export class ChildCommService { 
popItemSelected = new EventEmitter<any>(); 
constructor() { } 
} 

的發射器組件 」details.component.ts「：

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 
import { ChildCommService } from '../child-comm.service'; 

@Component({ 
selector: 'app-details', 
templateUrl: './details.component.html', 
styleUrls: ['./details.component.css'], 
providers: [ChildCommService] 
}) 
export class DetailsComponent implements OnInit { 
@Input() list; 
@Output() selectedItem= new EventEmitter(); 
@Output() reduceCount= new EventEmitter(); 
itemToPop =''; 
onSelect(item: string): void { 
this.selectedItem.emit(item); 
} 
constructor(private _CommService: ChildCommService) { } 
popItem(item){ 
this.itemToPop = item; 
this._CommService.popItemSelected.emit(item); 
this.reduceCount.emit(this.itemToPop); 
this.list.pop(this.itemToPop); 
} 
ngOnInit() { 
console.log("list",this.list); 

} 發光組件的HTML：

<div style="border: 2px; background-color:darkgray; width:300px;" > 
<ul> 
<li *ngFor="let item of list" [class.selected]="item === selectedItem" 
(click)="onSelect(item)"> 
{{item}}<button class="button" (click)="popItem(item)">X</button> 
</li> 
</ul> 
</div> 

應用模塊代碼：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { ChildCommService } from './components/child-comm.service'; 
import { AppComponent } from './app.component'; 
import { DetailsComponent } from './components/details/details.component'; 
import { PopListComponent } from './components/pop-list/pop-list.component'; 
​ 
@NgModule({ 
declarations: [ 
AppComponent, 
DetailsComponent, 
PopListComponent 
], 
imports: [ 
BrowserModule, 
FormsModule 
], 
providers: [ChildCommService], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

請看到它，爲什麼組件無法認購。是否有任何概念錯誤，因爲編譯器或控制檯不顯示任何錯誤。

Answer 1

我有類似的問題。不知何故，發射不工作，但它使用文件時，我使用next。在你的 「details.component.ts」，更改以下行：

this.reduceCount.emit(this.itemToPop); 

到

this.reduceCount.next(this.itemToPop); 

Answer 2

只是刪除供應商：ChidCommService]從 「彈出list.component.ts」 文件作爲我已經在AppModule中提供了它，現在它工作正常。

import { Component, OnInit } from '@angular/core'; 
import { ChildCommService } from '../child-comm.service'; 

@Component({ 
selector: 'app-pop-list', 
templateUrl: './pop-list.component.html', 
styleUrls: ['./pop-list.component.css'] 
}) 

export class PopListComponent implements OnInit { 
recievedItem: any; 
constructor(private _childService: ChildCommService) { } 
ngOnInit() { 

this._childService.popItemSelected 
.subscribe(
(itemToPop) => { 
this.recievedItem = itemToPop; 
} 
); 
} 
}