在 Angular 6+ 中路由到静态 html 页面

Question

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

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

Github 存储库： SpringTestingUI

Answer 1

有点晚了，正在谷歌搜索一个 Angular 到静态 html 生成器，遇到了这个，并认为我会弹出。我今天实际上学会了如何做这件事。

静态 html 页面基本上与其他静态资产（例如样式表或图像）没有区别，因此我们可以完全相同地对待这些页面。

遵循Angular 资产配置文档，我们可以创建我们的 html 文件，并根据需要通过.angular-cli.json或angular.json在应用程序中引用它们。

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

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

前任：

// 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正常进行路由。