在 Angular 6+ 中路由到静态 html 页面 [英] Routing to static html page in Angular 6+

问题描述

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

I have an Angular project with 3 components country, region, home. When I load the home page, I have route setup to HomeComponent, which hyperlinks for routes. Everything works just fine and behaving like a single page (SPA). Now, I want to add a static HTML page and route to it. I looked at Angular Route documentation, I couldn't find a way to do this. Here are the questions I have

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

1. Where can I place my static HTML pages
2. How to route those file in app-routing.module.ts

Github 存储库:SpringTestingUI

Github Repository: SpringTestingUI

推荐答案

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

A little late on this one, was googling around for an Angular to static html generator and came across this and figured I'd pop in. I actually learned how to do this exact thing today.

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

A static html page is basically no different than another static asset such as a stylesheet or image, so we can treat those pages the exact same.

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

Following the Angular asset configuration docs, we can create our html files and reference them in the application through the .angular-cli.json or angular.json as appropriate.

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

One thing I found particularly useful was being able to manually configure the reference path for the html page when it is resolved by the browser.

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

For example if we have a html in the directory src/static-pages/page1.html, by default if you add that path to the assets section of your angular.json, it will exist at the route http://hostname/static-pages/page1.html. Angular allows you to change the resolve path for this asset to be whatever you want by providing a few extra pieces of information into the assets section when referencing your static html or other asset.

例如:

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

The main difference between doing this and creating a visual component that only renders static html, is that this allows a web crawler to index that html page. If you simply just want to render static html text, I would create an additional SPA component in Angular, and do the routing as normal in your HomeComponent.

这篇关于在 Angular 6+ 中路由到静态 html 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！