Маршрут подстановочного знака для статического контента в Angular 7

Question

Я изучаю Angular 7, изучая этот пример приложения .В примере приложения используется маршрутный символ для обработки всех необработанных маршрутов.

В частности, этот app-routing.module.ts направляет все разные маршруты в AppConfig.routes.error404 , который обрабатывается Error404PageComponent.ts , который в конечном итоге обслуживает error404-page.component.html для каждого возможного маршрута, который не указан его собственным компонентом и именованным маршрутом.

Какие конкретные изменения необходимо внести в код в этом примере приложения, чтобы маршрут подстановочного знака служил разному статическому содержимому для разных отправленных маршрутов?

Например, если веб-пользователь ввел маршрут /i-am-a-jelly-donut, какие изменения необходимо будет сделать, чтобы запрос: 1) продолжал проходить через Error404PageComponent.ts, но браузер пользователя получил новыйi-am-a-jelly-donut.page.html вместо error404-page.component.html вида?

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

Цель здесь состоит в том, чтобывозможность обрабатывать статические маршруты без необходимости создавать отдельный компонент для каждого маршрута.Например, подумайте о блоге, в котором большинство маршрутов имеют одинаковый шаблон, но с разным содержанием в каждой записи блога.

Answer 1

Шаблоны компилируются в компоненты во время сборки, и вы не сможете изменить шаблон, который компонент использует во время выполнения, но вы можете скрывать и отображать разделы в зависимости от условий.Вставьте маршрутизатор в ваш компонент

constructor(private router: Router) {}

Теперь вы можете установить переменную для вашего компонента в зависимости от того, содержит ли маршрут 'i-am-a-jelly-donut'

jellyDonut = this.router.url.indexOf('i-am-a-jelly-donut') !== -1;

а в твоем шаблоне

<ng-container *ngIf="jellyDonut">
  Jelly Donut
</ngcontainer>

<ng-container *ngIf="!jellyDonut">
  Other stuff
</ngcontainer>