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

Question

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

我可以在哪里放置我的静态 HTML 页面
如何在 app-routing.module.ts

Github 存储库：SpringTestingUI

Answer 1

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

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

在 Angular asset configuration docs 之后，我们可以创建我们的 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.

中正常进行路由

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

Routing to static html page in Angular 6+

angular-routing

angular

angular-router