Question

免责声明 该问题与创建组件及其子组件的方式无关（如here所述）。它不考虑组件的选择及其类型（如here所述）。这并不是要基于观点，如果我的语言表达能力使我不满意，我会提前道歉。

我们有一个具有相当逻辑的组件（特定于该特定组件，别无其他）。该逻辑根据其他输入来更新许多条目。更新受一组复杂的不规则业务规则支配。随着时间的流逝，组件逐渐变大，需要进行大量滚动。那表明是时候重构它了。

在C＃中，我可以使用 partial 并创建一个文件，该文件使当前开发看不到该类的其余部分。就我看来，it's been asked for，但目前isn't implemented，也不会。

我可以创建一组特定于此特定组件的单独的实用程序类。不过，这似乎是一种hack。我正在这样想。

<plopp (click)="onClick($event)">...

...
onClick(event: KeyboardEvent) { Aux.onClick(event, this.something, ...); }

此外，即使我创建了一个单独的类来处理所有事件（在我们的案例中这很有意义），我仍然仍然需要模板文件可以绑定到（然后传达）的方法调用辅助功能），并且还需要将大多数属性也发送到辅助功能。

在这种情况下，按书做法是什么？正如链接所示，我对此进行了广泛的研究，但是我提出的内容很少。诚然，这不是最常见的情况，但它是一种情况，我更愿意相信可以通过适当的方式解决它。

Answer 1

假设您正在使用Visual Studio代码，而您的问题只是要使大量代码更加清晰，您可以像使用C＃一样使用功能性标记来创建区域

正在按以下方式使用它：

export class ExampleComponent {

    // #region I want this to be foldable
    ...
    A lot of code
    ...
    // #endregion

}

如果要使用Visual Studio Code获得有关区域功能的更多信息，请在此处查看：https://code.visualstudio.com/updates/v1_17#_folding-regions

Answer 2

第一条规则。永远不要将业务逻辑放在前端。第二条对SOC严格。如果您有局部视图，请创建一个Viewmodel并将其异步添加到父容器中。青睐围堵，父母可以根据需要容纳更多。视图模型也可以存在于子组件中。 Etc. Viewmodel等概念与子组件略有不同，它没有视图，只包含其他容器要使用的验证，属性和方法。

（如何）可以将Angular组件拆分为多个单独的部分？

2 个答案: