Angular UI 设计选项

Question

我是 Angular 的新手，需要一些关于如何设计这个用例的建议。

屏幕 1 - 提供多个文本框供用户输入数据

屏幕 2 - 根据输入的数据提供搜索结果

问题 1- 我正在考虑将 2 个 html 组件绑定到同一个 component.ts 文件。这是一个很好的设计吗？或者完全拥有 2 个不同的组件是否有意义。

问题 2- 是否可以编写一个像 SearchCriteria 这样的类，其中包含要包含在 UI 中的所有属性，以便将来如果搜索条件发生变化，我们只需进行最小的更改，或者 Angular 中是否有任何众所周知的设计模式来实现搜索。

Answer 1

回答您的问题：

问题 1

我想将 2 个 html 组件绑定到同一个 component.ts 文件。这是一个很好的设计吗？或者完全拥有 2 个不同的组件是否有意义。

• 在 Angular 中，每个组件类只有一个模板。由于 Angular 使用基于组件的概念，因此您需要从根组件创建组件树，以便使用多个模板。请参阅结构以供参考：

问题 2

是否可以编写一个像 SearchCriteria 这样的类，其中包含要包含在 UI 中的所有属性，以便将来如果搜索条件发生变化，我们只需进行最小的更改，或者 Angular 中是否有任何众所周知的设计模式实现搜索。

是的，这是可能的。您可以创建自定义搜索类组件。您需要将该组件导入其他组件以供您使用。在您的情况下，您可以为搜索功能创建自定义管道。

供参考：

• Angular Pipes
• Sample Search Pipe