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

Question

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

具体来说，此app-routing.module.ts将所有其他路由定向到AppConfig.routes.error404，由Error404PageComponent.ts处理，然后error404-page.component.html最终为未指定的所有可能路由服务Filter由自己的组件和命名的路线。

  

此示例应用程序中的代码需要进行哪些具体更改，以使通配符路由为不同的提交路由提供不同的静态内容？

例如，如果某个Web用户输入了路由/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

模板是在构建时编译到组件中的，您将无法更改组件在运行时使用的模板，但可以根据条件隐藏和显示节。将路由器注入您的组件中

if(input.matches(pattern)) { //input is input string
   ...
} else {
   System.out.println("Input does not match template ccc-dddd");
}

现在，您可以根据路线中是否包含“ i-am-a-jelly-donut”来设置变量

constructor(private router: Router) {}

并在您的模板中

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