子コンポーネント

Question

サブスクライブコンポーネント "ポップlist.component.ts" サービスを通じて持つEventEmitterに加入することはできません：

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.next(this.itemToPop); 

Answer 2

に

this.reduceCount.emit(this.itemToPop); 

を：[ChidCommService] "ポップlist.component.ts" からファイルIなど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; 
} 
); 
} 
}