Angular 7中静态内容的通配符路由

Question

我正在通过学​​习this example app 来学习 Angular 7。示例应用程序使用通配符路由来处理所有其他未处理的路由。

具体来说，这个app-routing.module.ts 将所有杂项路由定向到AppConfig.routes.error404，由Error404PageComponent.ts 处理，然后最终为每个未由其自己的组件和命名路由指定的可能路由提供error404-page.component.html。

为了让通配符路由为不同的提交路由提供不同的静态内容，需要对该示例应用中的代码进行哪些具体更改？

例如，如果网络用户输入路由 /i-am-a-jelly-donut，需要进行哪些更改才能使请求 1.) 继续通过 Error404PageComponent.ts，但让用户的浏览器接收新的 @ 987654328@ 而不是 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>