angular 5 EventEmitter 什么都不给

Question

请帮助我理解为什么我的示例中的 EventEmitter 不起作用。我看不到代码中的错误，但它仍然无法正常工作。我没有错误也没有效果。

app.menu.ts（子组件）：

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

@Component({
  selector: 'Menu',
  templateUrl: app.menu.html,
  styleUrls: ['app.menu.css'],
})

export class Menu {

  @Output() pick = new EventEmitter<any>();

  hidden: boolean = true;
  items: object[] = [
    {action: 'login', text: 'zaloguj się'},
    {action: 'halls', text: 'hale sportowe'},
    {action: 'sweemingPools', text: 'baseny'},
  ];

  constructor() {}

  toggler() {
    this.hidden = !this.hidden;
  };

  displayMarkers(type:string){
    console.log('test1', type); //work correctly
    this.pick.emit(type); //won't work
  };

}

子模板：

  <div>
   <button (click)="toggler()">MENU</button>
   <div id="left-menu" [hidden]="hidden">
    <ul>
      <li *ngFor="let item of items"><a (click)=displayMarkers(item.action)>{{ item.text }}</a></li>
    </ul>
  </div>
 </div>

app.ts（父组件）：

import { Component } from '@angular/core';

import { Menu } from './menu/app.menu';
import { Map } from './map/app.map';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
})
export class App {
  title: string = 'My webapp';

  onPick(event:string){
    console.log('test2', event); //nothing, won't work
  }
}

父模板：

  <div>
  <Menu (pick)="onPick($event)"></Menu>
  <div style="text-align:center">
    <h1>{{ title }}!</h1>
  </div>
  <Map></Map>
</div>

这是非常简单的代码，我看到了几个类似的例子。所以它应该工作。请不要将我发送到不同的主题，因为我看到它们真的很多。我认为 onPick 函数从来没有运行，但为什么呢？怎么了？

Answer 1

将您的菜单组件添加到 app.module.ts 声明属性，如下所示：

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from './app.component';
import { ChildComponent } from './app-child-component';
import {Menu} from './menu.component.ts';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, ChildComponent, Menu ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

然后在你的父组件中：

import {Component} from '@angular/core'

@Component({
  selector: 'app-child-component',
  template: `
    <Menu (pick)=onPick($event)></Menu>
  `,
})
export class ChildComponent {
  onPick(e) { console.log('picked'); alert('picked')};
}

和您的组件：

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

@Component({
  selector: 'Menu',
  template: `
  <div>
  test
   <button (click)="toggler()">MENU</button>
   <div id="left-menu" [hidden]="hidden">
    <ul>
      <li *ngFor="let item of items"><a (click)="displayMarkers(item.action)">{{ item.text }}</a></li>
    </ul>
  </div>
 </div>`
})

export class Menu {

  @Output() pick = new EventEmitter<any>();

  hidden: boolean = true;
  items: object[] = [
    {action: 'login', text: 'zaloguj się'},
    {action: 'halls', text: 'hale sportowe'},
    {action: 'sweemingPools', text: 'baseny'},
  ];

  constructor() {}

  toggler() {
    this.hidden = !this.hidden;
  };

  displayMarkers(type:string){
    console.log('test1', type); //work correctly
    this.pick.emit(type); //won't work
  };

}

angular 5 EventEmitter 什么都不给

angular 5 EventEmitter give nothing

eventemitter

angular