angular - 路由到 Angular 6+ 中的静态 html 页面

Question

我有一个 Angular 项目，其中包含 3 个组件国家、地区、家庭。当我加载主页时，我将路由设置为 HomeComponent，它是路由的超链接。一切正常，表现得像一个单页 (SPA)。现在，我想添加一个静态 HTML 页面并路由到它。我看了Angular Route文档，我找不到办法做到这一点。这是我的问题

1. 我可以在哪里放置我的静态 HTML 页面
2. 如何在 app-routing.module.ts 中路由这些文件

Github 存储库:SpringTestingUI

Answer 1

这件事有点晚了，我在谷歌上搜索了一个 Angular 到静态 html 生成器，偶然发现了这个，我想我会加入。我今天实际上学会了如何做这件事。

静态 html 页面基本上与样式表或图像等其他静态 Assets 没有什么不同，因此我们可以完全相同地对待这些页面。

在 Angular asset configuration docs 之后，我们可以创建我们的 html 文件并在应用程序中通过 .angular-cli.json 或 angular.json 适本地引用它们。

我发现特别有用的一件事是能够在浏览器解析时手动配置 html 页面的引用路径。

例如，如果我们在目录 src/static-pages/page1.html 中有一个 html，默认情况下，如果您将该路径添加到您的 assets 部分angular.json，它将存在于路径http://hostname/static-pages/page1.html。 Angular 允许您通过在引用静态 html 或其他 Assets 时向 Assets 部分提供一些额外的信息，将此 Assets 的解析路径更改为您想要的任何路径。

例如:

// angular.json

{
   ...

   "assets": [
       // This page is routed /static-pages/page1.html
       "src/static-pages/page1.html",
       
       // This page is routed /home/page1.html
       { "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
   ],
 
   ...
}

这样做与创建仅呈现静态 html 的可视化组件之间的主要区别在于，这允许网络爬虫索引该 html 页面。如果您只想呈现静态 html 文本，我会在 Angular 中创建一个额外的 SPA 组件，并在您的 HomeComponent 中正常进行路由。