在Visual Studio中将Angular组件文件嵌套到一个文件中

Question

Visual Studio 2017中的哪个设置允许将Angular组件文件捆绑到一个文件中？

在下图中，红色方块中的文件应该可视化显示为可以展开的文件。

文件名称为：

• navmenu.component.css
• navmenu.component.html
• navmenu.component.ts

他们只是因扩展而有所不同。 html文件应该是主要的文件，ts和css作为子文件呈现。

在我将Visual Studio 2017更新到版本15.3.3（15.1之前）之前，它工作正常。

Answer 1

我终于在that thread找到了解决该问题的方法。它需要编辑toolSettings.json文件。

需要修改位于toolSettings.json

中的C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\Extensions\Microsoft\Web Tools\ProjectSystem

需要添加以下条目

".ts": [
    ".html"
],

<{1>}下的

。

extensionToExtension数组中的".html"。

整个文件看起来像这样：

"css"

Answer 2

接受的答案让我走上了正确的道路，但我有一些改进要贡献：

首先，我建议您创建自己的嵌套规则，而不是编辑 Visual Studio 默认规则。您可以选择 create one just for your personal use 或 create a .filenesting.json file in your Project or Solution folder，以便您的队友在默认情况下获得相同的体验。

其次，因为在 Angular 中，它是定义组件的打字稿，有时会引用 HTML、CSS 等，对我来说，反转这种关系更有意义。

这是我最终用于我们的网络应用项目的 .filenesting.json 文件，以防它作为其他 Angular 和 Visual Studio 用户的极简起点有用。

{
  "help": "https://go.microsoft.com/fwlink/?linkid=866610",
  "root": true,

  "dependentFileProviders": {
    "add": {
      "addedExtension": {},
      "pathSegment": {
        "add": {
          ".spec.ts": [
            ".ts"
          ]
        }
      },
      "extensionToExtension": {
        "add": {
          ".html": [
            ".ts"
          ],
          ".scss": [
            ".ts"
          ]
        }
      }
    }
  }
}