출력() 이벤트

Question

을 방출하지 나는 다음과 같은 아키텍처가 :

UiControlsModule 
|- Component 1 
|- Component 2 

모듈 (1) 수입 SharedModule에 수출됩니다.

CasesModule 
|- CaseListComponent 
|- // several other components 

SharedModule을 CasesModule로 가져옵니다.

<cre-question-group 
    (valueChanged)="catchValueChange(question)"> 
</cre-question-group> 

내가 구성 요소 1에서 정의한 여기에 값 변경, 잡으려고 노력하고있어 :

@Output() valueChanged = new EventEmitter<Question>(); 

someMethod(question: Question) { 
    this.valueChanged.emit(question); 
} 

을

이제 CaseListComponent 내부에서 나는 (UiControlsModule의) 구성 요소 1의 인스턴스가

someMethod() 메서드가 호출되고 이벤트가 발생합니다. 그러나, 나는 CaseListComponent에서 이벤트를 잡을 수 없다. valueChanged을 검사 할 때 구독자가없는 것을 볼 수 있습니다 (배열이 비어 있음).

나는 하나의 모듈에서 다른 모듈로 이동하기 때문에 그걸 해결할 방법이 확실하지 않다고 가정합니다.

어떤 도움을 크게 감사합니다 :)

@Update : 은 그것이 다른 모듈의 구성 요소이기 때문에 작동하지 않습니다 수 있습니까? 정상적으로 작동해야합니까, 아니면 제가 잘못 되었습니까?

@Update 2

는 :

지금 나는 메시지 서비스는 제목과 관찰을 통해 통신로를 구현하기 위해 노력하지만, 일부 기적의 이유로이 잘 작동하지 않습니다. 여기에 내가 그것을 구현하는 방법은 다음과 같습니다

질문-group.component.ts :

catchValueChange(question: Question) {  

    this.messagesService.sendComponentChangeEvent(question); 
} 

messages.service.ts :

@Injectable() 
export class MessagesService { 

    constructor() { } 

    // Observable string sources 
    private componentChangeEvent = new Subject<Question>(); 

    // Observable string streams 
    componentValueChanged$ = this.componentChangeEvent.asObservable(); 

    // Service message commands 
    sendComponentChangeEvent(question: Question) { 
     this.componentChangeEvent.next(question); // <-- breakpoint reaches this point as expected. After, nothing happens - and there's no observer on componentChangeEvent. 
    } 
} 

경우-list.component. html :

ngOnInit() { 

    // watch for changes on edit of the components 
    this.subscription = this.messagesService.componentValueChanged$.subscribe((question: any) => { 
     console.log(question.id + " (" + question.type + "): " + question.selection); 
    }); 

템플릿에서 Observable을 구독하지만 그 시점에 도달하지 않습니다. 오류가 messages.service.ts 어딘가에 있다고 가정합니다. 개발자 콘솔에 오류가 표시되지 않습니다.

Answer 1

템플릿 이벤트 처리기 함수 의 매개 변수는 $event이어야합니다.이라고해야합니다. 핸들러 메소드 선언 (구성 요소 클래스 정의에서)에서 원하는대로 호출 할 수 있습니다.

는 다음과 같이하십시오 :

템플릿을.(대신) HTML

<cre-question-group (valueChanged)="catchValueChange($event)"></cre-question-group> 

<cre-question-group 
    (valueChanged)="catchValueChange(question)"> 
</cre-question-group> 

타이프 라이터

catchValueChange(question: Question) { 
    console.log('question', question); 
}