Question

发出事件的方法可以正常工作，但预订的方法不会触发。这是相关的代码-抱歉，添加了这么多代码，但是我觉得有必要提供上下文；关键行是带有双星号的行，因为粗体在代码块中不起作用：

app.component.html

<div class="container">
  <app-header
    (menuFired)="onMenuFired($event)"
    ></app-header>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <app-recipe-book *ngIf="isRecipesSelected()"></app-recipe-book>

      <app-shopping-list *ngIf="isShoppingListSelected()"></app-shopping-list>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { EventSource } from './header/header.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'course-project';
  currentSelection: EventSource = EventSource.Recipes;

  onMenuFired(eventData: EventSource) {
    **console.log("This doesn't work");**
    this.currentSelection = eventData;
  }

  isRecipesSelected() {
    return (this.currentSelection ===
      EventSource.Recipes);
  }

  isShoppingListSelected() {
    return (this.currentSelection ===
      EventSource.ShoppingList);
  }
}

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle"
        (click)="collapsed = !collapsed"
        ><span
          class="icon-bar"
          *ngFor="let iconBar of [1, 2, 3]"
          ></span>
      </button>
      <a 
        routerLink="/"
        class="navbar-brand"
        >Recipe Book</a>
    </div>
    <div
      class="navbar-collapse"
      [class.collapse]="collapsed"
      (window:resize)="collapsed = true">
      <ul class="nav navbar-nav">
        <li>
          <a
            href="#"
            (click)="onClickRecipes($event)"
            >Recipes</a>
        </li>
        <li>
          <a 
            href="#"
            (click)="onClickShoppingList($event)"
            >Shopping List</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li appDropdown class="dropdown">
          <a
            href="#"
            class="dropdown-toggle"
            role="button"
            >Manage<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

header.component.ts

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

export enum EventSource {
    Recipes,
    ShoppingList
  }

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
  collapsed = true;

  @Output()
  menuFired = new EventEmitter<EventSource>();

  onClickRecipes = (event: Event) => {
    **console.log('This works');**
    event.preventDefault();
    this.menuFired.emit(EventSource.Recipes);
  }

  onClickShoppingList = (event: Event) => {
    **console.log('This works');**
    event.preventDefault();
    this.menuFired.emit(EventSource.ShoppingList);
  }
}

好几天以来，我一直对此表示怀疑，但我只是想不通。看来它应该正常工作。在其他运作良好的地方也有类似的设置。

Answer 1

请找到 Working Exaxmple

Answer 2

所以我知道了。这与代码本身无关，而与我在app.module.ts中所做的事情有关。在@NgModule-> bootstrap中，由于某种原因，我包含了HeaderComponent。我不记得为什么要把它放在那里，但显然那以某种方式压制了事件。感谢所有尝试提供帮助的人；如果我没有看到它可以在stackblitz上运行，那么我永远也不会检查app.module。

Answer 3

未收到Angular 8 Click事件

（点击）如何？

  <app-header
    (click)="onMenuFired($event)"
    ></app-header>

Angular 8 Click事件未收到

3 个答案: