0

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

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

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

例如，如果 Web 用户输入了 route /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但是，除了每个非指定路由的逻辑之外，我们将添加逻辑以在内部为特定静态路由提供特殊处理。

这里的目标是能够处理静态路由，而不必为每个路由创建单独的组件。例如，考虑一个博客，其中大多数路由具有相同的模板，但每个博客条目中的内容不同。

4

1 回答 1

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>
于 2019-05-16T03:30:40.533 回答