在路由到新模块后，在Angular 6中发出事件时，父函数不会调用

Question

我在Angular 6中创建了一个新模块，而不是app - module。

 1. Created two components: query-bulider and query-panel.
 2. query-builder is parent component and  query-panel is child component.
 3. not able to call parent function from the child component. 

-内部查询构造器html <query-panel (msgEvent)="recieveMsg($event)"></query-panel>

-内部查询面板html

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

-内部查询构造器组件

@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> 

-App模块

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

你的代码工作得很好，除了你的QueryPanelComponent中的以下几点：

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

由于您已将输出参数msgEvent声明为EventEmitter，的实例，因此应将其从 you中删除

在上观看现场直播。

Answer 2

你有额外的初始化事件发射器

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

去掉它，它就可以工作了