angular - 使用 TypeScript 使用组件 Angular

Question

情况：

• 我有一个“主页”，我们可以在其中查看库存书籍。
• “主页”和图中的蓝色框是同一个组件。
• 我还有一个名为“搜索”的组件。

想要的结果：

• 我想使用“搜索”组合。（绿色框）在“主页”内。
• 我想允许用户在搜索框中输入信息并将结果显示在“主页”（蓝色框）中。

问题：

如何处理这种情况？我已经阅读了一些关于某些类型 pf 父/子解决方案的信息 - 但我觉得我不太了解这在我的情况下是如何工作的。

PS。如果有人觉得这个问题不够准确 - 你可以改变它！

标签： angulartypescriptparent-childangular-components

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>

希望这有帮助