Angular:子函数发射时不调用父函数

Question

我看过很多与这个问题有关的主题，但没有找到答案。这是我的主题：

我想用EventEmitter.emit(value(.将数据从我的子组件传递给我的父组件

问题是，当我console.log它时，我的发射器不会发出任何数据(未定义(。此外，在发射数据时不会调用Parent函数。

我试过：

• 将数据类型更改为字符串：无效
• 将导入更改为"@angular/core"：但已从"@angular/core"更改
• 在Parent HTML中将$event更改为$event.value：该事件应该是一个"电影"电视节目"；所以不工作

我根据Angular文档和先例主题做了一切，但我没有发现我做错了什么。

感谢您的回复和抽出时间。

子组件HTML

<div class="switch-menu">
<button class="switch-btn" (click)="toggleMovies($event)" [ngClass]="this.showingMovies == 'Movies' ? 'active-button':''" value="Movies">Movies</button>
<button class="switch-btn" (click)="toggleMovies($event)" [ngClass]="this.showingMovies == 'TV Shows' ? 'active-button':''" value="TV Shows">TV Shows</button>
</div>

子组件TS

@Output() eshowingMovies: EventEmitter<string> = new EventEmitter();
showingMovies: "Movies"|"TV Shows" = "Movies";
toggleMovies(_ev: Event): void{
if (this.showingMovies !== (_ev.target as HTMLInputElement).value){
this.showingMovies = this.showingMovies == "Movies" ? "TV Shows" : "Movies";
this.eshowingMovies.emit(this.showingMovies);
}
}

父组件HTML

<app-movie-list-find (eshowingMovies)="toggleMovies($event)" ></app-movie-list-find>
<app-show-list-find (eshowingMovies)="toggleMovies($event)" ></app-show-list-find>

我在Parent html文件中有此错误消息

事件应该是"；电影"电视节目"；类型，但它是一个事件。

(parameter) $event: Event
Argument of type 'Event' is not assignable to parameter of type '"Movies" | "TV Shows"'.
Type 'Event' is not assignable to type '"TV Shows"'.ngtsc(2345)
find.component.ts(4, 20): Error occurs in the template of component FindComponent.

父组件TS

showingMovies: "Movies"|"TV Shows" = "Movies";
toggleMovies(event: "Movies"|"TV Shows"): void{
if (this.showingMovies !== event){
this.showingMovies = event;
}
}

Answer 1

我不清楚您在当前实现中到底试图实现什么，但我看不出有什么理由在单击按钮时将事件本身传递给您的孩子。您可以执行以下操作：

<div class="switch-menu">
<button class="switch-btn" (click)="toggleMovies('Movies')" [ngClass]="this.showingMovies == 'Movies' ? 'active-button':''" value="Movies">Movies</button>
<button class="switch-btn" (click)="toggleMovies('TV Shows')" [ngClass]="this.showingMovies == 'TV Shows' ? 'active-button':''" value="TV Shows">TV Shows</button>
</div>

然后在您的子函数中，它会发出值-

toggleMovies(category: "Movies" | "TV Shows"): void {
this.eshowingMovies.emit(category);
}
}

这应该可以解决你的问题