Маршрутизация на статическую HTML-страницу в Angular 6+ - PullRequest
Новая
       6

Маршрутизация на статическую HTML-страницу в Angular 6+

0 голосов
/ 21 ноября 2018

У меня есть угловой проект с 3 компонентами: страна, регион, дом.Когда я загружаю домашнюю страницу, у меня есть настройка маршрута на HomeComponent, которая содержит гиперссылки на маршруты.Все работает просто отлично и ведет себя как одна страница (SPA).Теперь я хочу добавить статическую HTML-страницу и перейти к ней.Я посмотрел документацию Angular Route , я не смог найти способ сделать это.Вот вопросы, которые у меня есть

  1. Где я могу разместить свои статические HTML-страницы
  2. Как перенаправить эти файлы в app-routing.module.ts

Github Repository: SpringTestingUI

1 Ответ

0 голосов
/ 11 июня 2019

Немного опоздал на этот раз, гуглил по поиску генератора HTML в формате Angular и static и наткнулся на это и подумал, что я заскочу. Я на самом деле научился делать именно эту вещь сегодня.

AСтатическая HTML-страница в основном ничем не отличается от другого статического актива, такого как таблица стилей или изображение, поэтому мы можем обращаться с этими страницами точно так же.

Следуя документам конфигурации углового актива , мы можем создатьнаши html-файлы и ссылки на них в приложении через .angular-cli.json или angular.json, в зависимости от ситуации.

Одна вещь, которую я нашел особенно полезной, была возможность вручную настроить ссылочный путь для html-страницы, когда она разрешенабраузером.

Например, если у нас есть html в каталоге src/static-pages/page1.html, по умолчанию, если вы добавите этот путь в раздел assets вашего angular.json, он будет существовать на маршруте 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-текст, я бы создал дополнительный компонент SPA в Angular и сделал бы маршрутизацию как обычно в вашем HomeComponent.

...