Angular 15，子組件不向父組件發送字符串

Question

我有這個子組件 (filters.component.ts)，我試圖從中向父組件發出一個字符串。 我已經用不同的組件完成過一次，但似乎 Angular 不喜歡我實現 *ngFor 來循環遍歷字符串數組並將類別字符串傳遞給方法？ 我嘗試將控制台日志添加到 home.component.ts 中的 onShowCategory() 方法並且它不會將任何字符串值記錄到控制台，這讓我相信點擊事件時這些值沒有傳遞給父級被激活。 這是代碼（我添加了指向相關代碼行的箭頭，它們不是我代碼的一部分，也不是問題所在。 ）：

過濾器.component.html：

<mat-expansion-panel *ngIf="categories">
    <mat-expansion-panel-header>
        <mat-panel-title>CATEGORIES</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-selection-list [multiple]="false">
        <mat-list-option *ngFor="let category of categories" [value]="category"> <--------
            <button (click)="onShowCategory(category)">{{ category }}</button> <--------
        </mat-list-option>
    </mat-selection-list>
</mat-expansion-panel>

過濾器.component.ts:

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: []
})
export class FiltersComponent {
  @Output() showCategory = new EventEmitter<string>() <-------

  categories: string[] = ['shoes', 'sports']; <-------

  onShowCategory(category: string): void { <-------
    this.showCategory.emit(category); <-------
  }
}

home.component.html：

<mat-drawer-container [autosize]="true" class="min-h-full max-w-7xl mx-auto border-x">
    <mat-drawer mode="side" class="p-6" opened>
        <app-filters (showCategory)="onShowCategory($event)"></app-filters> <-------
    </mat-drawer>
    
    <mat-drawer-content class="p-6">
        <app-products-header (columnsCountChange)="onColumnsCountChange($event)"></app-products-header>
        
        {{ category }} <----- should display the category when selected
    </mat-drawer-content>
</mat-drawer-container>

home.component.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: []
})
export class HomeComponent {
  cols = 3;
  category: string | undefined; <-------
  
  onColumnsCountChange(colsNumber: number): void {
    this.cols = colsNumber
  }
 
  onShowCategory(newCategory: string): void { <-------
    this.category = newCategory; <-------
  }
}

我已經通讀並跟蹤了變量很多次，但沒有發現問題。 從子組件模板中，我將類別傳遞給 onShowCategory 方法並將其發送給父組件。 我從父級調用 EventEmitter 並傳遞 $event 變量，該變量應該更改 home 組件中類別屬性的值。 我檢查了拼寫，並嘗試移動標簽。 當我向方法中添加一個時，我沒有在控制台中看到 console.log，而且我無法讓該字符串出現在主模板上。 我究竟做錯了什么？

Answer 1

你的父母 html 應該有 messageEvent。 試試這個，看看它是否有效。

<app-filters (messageEvent)="onShowCategory($event)"></app-filters>

<app-products-header (messageEvent)="onColumnsCountChange($event)"></app-products-header>

我還喜歡在設置 EventEmitter 時在每個點都放置 console.log 語句，只是為了看看它卡在哪里。

Answer 2

休息一下，又花了幾個小時在 inte.net 上尋找答案（無濟於事）后，我決定嘗試一些完全不直觀的方法並解決了它。

我變了：

<mat-list-option *ngFor="let category of categories" [value]="category">
            <button type="button" (click)="onShowCategory(category)">{{ category }}</button>
        </mat-list-option>

到

<mat-list-option *ngFor="let category of categories" (click)="onShowCategory(category)" [value]="category">
      <div>{{ category }}</div>
</mat-list-option>

現在它可以工作了，不完全確定為什么點擊事件需要在父標簽上而不能在按鈕本身上。 讓我想到這個解決方案的思考過程是點擊事件似乎沒有激活和/或類別數組中的字符串沒有正確傳遞給方法。 我希望這對將來的人有幫助。