通过Angular Material实现Tree功能（基于Angular 7）
视频说明(日语)
视频说明（英语）
必需的环境
我将介绍在Angular 7中使用Angular Material创建树的方法。
Tree是一个用于显示层次数据的工具。
经常使用的情况是显示目录结构的场合。
打开一个目录后，里面会有文件和更多的目录。
打开该子目录后，里面包含了文件和更多的子目录，适合表示嵌套结构。
使用Angular Material可以轻松创建树形模板。
请注意，在下面的解释中，需要系统已安装Angular 7。如果您尚未安装，请先安装。
此外，在Angular 7中，
创建一个新项目 [项目名称].
请提前创建自己的项目。
一旦项目生成后，我们会切换到该项目的目录中。
这里的项目是ng7MaterialTree。
最后，输入”code .” 并启动Visual Studio Code。
安装 Angular Material
当VS Code启动后，您可以使用Control + @快捷键打开终端窗口。
输入`ng add @angular/material`，然后安装Angular Material。
因此，由于关于配色主题的询问，我们在这里选择了标准的靛蓝-粉色组合。
接下来，询问是否设置HammerJS，请输入”y”。
因为有一个关于是否使用动画的询问，所以请您输入字母y作为回答。
然后，进行Package.json文件等的重新编辑，安装完成。
生成Tree的过程
首先，在浏览器中打开 Angular Material Schematics 的页面，网址是 https://material.angular.io/guide/schematics 。
然后显示树形图节，以及其命令行。
使用ng generate @angular/material:tree <组件名称>生成Angular Material的树形组件。
复制。
返回VS Code，并将其粘贴到命令行中。
组件名称由您自行设定。
在这里，我们将组件命名为mytree。
这个制作很快就结束了。
查看源代码后，可以看到生成了一个名为mytree的新目录。
然后打开该目录中的mytree.component.ts文件，并复制选择器名称。
在这里，它被称为app-mytree。
接下来，打开app.component.html文件，并将标签粘贴到最底行。
进一步，将所有默认的HTML文本都注释掉。
把这个文件保存起来。
然后，在终端窗口中键入`ng s -o`，启动本地服务器，并打开浏览器。
显示类似于资源管理器的页面，尝试点击文件夹图标。
然后，它的内容会被展开。
生成了Tree的模板。
可以的。
请提供要重述的具体内容。
参考文献
-
- “Schematics”,
-
- https://material.angular.io/guide/schematics
-
- “Angular Update Guide”,
-
- https://update.angular.io/
-
- “Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more”,
-
- https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c
-
- “Angular5,Angular6,Angular7 Custom Library: Step-by-step guide”,
-
- https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
-
- “Angular5,Angular6,Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,
- https://www.udemy.com/angular5-l/
