Родительская функция не вызывается, когда событие генерируется в Angular 6 после маршрутизации в новый модуль.

Question

Я создал новый модуль в Angular 6, отличный от app-module.
1. Создал два компонента: query-bulider и query-panel.
2. query-builder - это родительский компонент и query-панельявляется дочерним компонентом.
3. не может вызвать родительскую функцию из дочернего компонента.
--- html внутри блока запросов <query-panel (msgEvent)="recieveMsg($event)"></query-panel>

--- html внутри панели запросов

    <button class='btn btn-primary' (click)="sendMessage()">Click me</button>

----- внутри компонента bulder запросов

@Component({
  selector: 'query-builder',
  templateUrl: './query-builder.component.html',
  styleUrls: ['./query-builder.component.css']
})
export class QueryBuilderComponent implements OnInit {


  submitted = false;

  constructor() { }

  ngOnInit() {
  }
  recieveMsg(event){
    console.log('inside builder component');
  }


}

---------- внутри компонента панели запросов

import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'query-panel',
  templateUrl: './query-panel.component.html',
  styleUrls: ['./query-panel.component.css']
})
export class QueryPanelComponent implements OnInit {

  @Output() msgEvent = new EventEmitter();
  constructor() { }



  ngOnInit() {
    this.msgEvent = new EventEmitter();
  }




    sendMessage(){

       this.msgEvent.emit('Stop');
       console.log('send  message');

    }

}

---------------- Компонент приложения html

 <router-outlet></router-outlet> 

--------- Модуль приложения ---

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";


import { AppComponent } from './app.component';
import { QueryBuilderModule } from './component/query-builder/query-builder.module';
import { QueryBuilderComponent } from './component/query-builder/query-builder.component';
import { TestComponent } from './test/test.component';


const appRoutes: Routes=[
  {
      path:'', component:QueryBuilderComponent
  }]

  export const routing= RouterModule.forRoot(appRoutes);



@NgModule({
  declarations: [
    AppComponent,
    TestComponent,

  ],
  imports: [
    BrowserModule,
    QueryBuilderModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

--------- Модуль запроса булдера -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ObjectBrowserComponent } from '../object-browser/object-browser.component';
import { QueryPanelComponent } from '../query-panel/query-panel.component';
import { OutputPanelComponent } from '../output-panel/output-panel.component';
import { QueryBuilderComponent } from './query-builder.component';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';


@NgModule({
  imports: [
    CommonModule,


  ],
  declarations: [
    QueryBuilderComponent, 
    ObjectBrowserComponent,
    QueryPanelComponent,
    OutputPanelComponent,
    TreeViewComponent
  ],
  bootstrap: [QueryBuilderComponent]
})
export class QueryBuilderModule { }

Answer 1

у вас есть дополнительная инициализация события Emitter

 ngOnInit() {
    this.msgEvent = new EventEmitter();
  }

удалите это, и оно будет работать

Answer 2

Ваш код работает нормально, за исключением следующего в вашем QueryPanelComponent -

ngOnInit() {
  this.msgEvent = new EventEmitter();    // remove this
}

Поскольку вы уже объявили выходной параметр msgEvent как экземпляр EventEmitter, Вы должны удалить его из ngOnInit()

Посмотреть вживую здесь .