使用TypeScript使用Angular組件

Question

情況：

• 我有一個“主頁”，在這里我們可以看到庫存的書。
• 圖片中的“主頁”和藍色框是相同的組件。
• 我還有一個名為“搜索”的組件。

想要的結果：

• 我想使用“搜索”組件。 （綠色框）在“主頁”中。
• 我想允許用戶在搜索框中輸入信息，並將結果顯示在“主頁”（藍色框）中。

題：

一個人將如何處理這種情況？ 我已經閱讀了一些有關pf型父/子解決方案的信息-但我不太了解這種情況對我的情況如何起作用。

PS。 如果有人認為問題不夠准確-您可以更改它！

Answer 1

1. 您應該為搜索組件添加輸出

@Output() search: string;

2. 您應該將其綁定到搜索組件模板

<app-search (search)="searchStr = $event"></app-search>

3. 您應該使用searchStr來過濾列表（您可以向其編寫函數-例如按名稱）

get displayList() {
    return this.list.reduce((sum, value) => {
        if (value.name.substring().indexof(this.searchStr.substring()) > -1) {
            sum.push(value);
        }
        return sum;
    }, []);
}

4. 現在顯示清單

<ul>
    <li *ngFor="let item of displayList">{{ item.name }}</li>
</ul>

希望這個幫助