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

【问题标题】：(How) can an Angular component be split into multiple, individual parts?（如何）可以将 Angular 组件拆分为多个单独的部分？
【发布时间】：2019-06-07 21:54:55
【问题描述】：

免责声明这个问题不考虑创建组件及其子组件的模式（如here 所讨论的）。它不考虑组件的选择及其类型（如here 所讨论的）。这并不意味着基于意见，如果我的语言技能在制定时让我失败，我会提前道歉。

我们有一个具有相当多逻辑的组件（特定于该特定组件而不是其他组件）。该逻辑会根据其他人的输入更新许多条目。更新由一组复杂的不规则业务规则管理。随着时间的推移，组件变得越来越大，需要一些沉重的滚动。这表明是时候重构它了。

在 C# 中，我可以使用 partial 并创建一个文件，将类的其余部分保存在当前开发的视线之外。据我所见，it's been asked for 但目前isn't implemented，也不会。

我可以为这个特定组件创建一组单独的实用程序类。不过，这似乎是一个黑客行为。我是这么想的。

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

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

另外，即使我创建了一个单独的类来处理所有事件（在我们的例子中这很有意义），我仍然需要一个模板文件可以绑定到的方法（然后传达对辅助的调用），它也需要将大部分属性发送给辅助。

在这种情况下，什么是循规蹈矩的方法？正如链接所示，我已经深入研究了这一点，但我想出的很少。诚然，这不是最常见的情况但这是一种情况，我更愿意相信它可以通过适当的方式解决。

【问题讨论】：

您的问题是否只是关于保持概览并更快地找到组件中的特定部分？如果是这样，您还可以使用 //#region 和 //#endregion 标记对组件中的区域（事件处理程序、函数...）进行分类，并且可以折叠和展开（假设您使用的是 Visual Studio Code）
@schlonzo 我不知道 TypeScript 中有一个区域工具。我在后端代码中使用区域化并且确实发现它非常有用。但是，在TS中，我还没有看到。它是 VS Code 特有的功能吗？我没有将 TS 代码转换为 JS，我的 Lint 抱怨它。我错过了什么吗？
是的，我认为这是 Visual Studio Code 独有的功能。我很困惑，它会导致您的代码无法编译并且您的 Linter 会抱怨。这只是一个注释，由 VS Code 特殊处理。也许 Linter 不喜欢 // 和 # 之间没有空格。有关 TypeScript 和 VS Code 中区域的更多信息，请参阅 here
@schlonzo 我真傻。我一定有 C# 风格，并没有注意到您评论中的双斜杠。我只是尝试了#region，就像我在 C# 中习惯的那样，就像我提到的那样，它没有用。一旦我遵循了您的实际建议， id 确实起作用了（尽管缺少空格，Lint 也没有抱怨，这有点奇怪，但目前我对我对这个主题的无知感到满意）。
@schlonzo 您可能希望将您的评论与一个简短的示例一起作为答案，以便我接受。

标签： angular

【解决方案1】：

假设您正在使用 Visual Studio Code，而您的问题只是让大量代码更清晰，您可以使用特色标记来创建 regions，就像您可能从 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

【讨论】：

这不会占用 1000 多行代码并神奇地将其变成 200 行代码。这不是重构。该代码应该分成不同的文件。