发出事件的方法可以正常工作,但预订的方法不会触发。这是相关的代码-抱歉,添加了这么多代码,但是我觉得有必要提供上下文;关键行是带有双星号的行,因为粗体在代码块中不起作用:
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);
}
}
好几天以来,我一直对此表示怀疑,但我只是想不通。看来它应该正常工作。在其他运作良好的地方也有类似的设置。
答案 0 :(得分:0)
请找到 Working Exaxmple
答案 1 :(得分:0)
所以我知道了。这与代码本身无关,而与我在app.module.ts中所做的事情有关。在@NgModule-> bootstrap中,由于某种原因,我包含了HeaderComponent。我不记得为什么要把它放在那里,但显然那以某种方式压制了事件。感谢所有尝试提供帮助的人;如果我没有看到它可以在stackblitz上运行,那么我永远也不会检查app.module。
答案 2 :(得分:-1)
未收到Angular 8 Click事件
(点击)如何?
<app-header
(click)="onMenuFired($event)"
></app-header>