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

问题描述

我有一个Angular项目，其中包含国家，地区和家庭三个组成部分.加载主页时，我有到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，则默认情况下，如果将该路径添加到angular.json的assets部分中，则该路径将位于路由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的可视组件之间的主要区别在于，这允许Web搜寻器为该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屋！