如何使用一个级别的URL构建角度项目？

Question

在网站上分为几个部分：按类别排列的帖子，视频库等。我需要一个网址（domain.com/page-address）。我可以获取此page-address必须在正面加载哪个视图的信息，但是我不能很好地组织角度项目。

通过将所有路由发送到单个组件，我设法使所有组件只能通过单个组件和单个路由器出口中的所有组件工作。routes: Routes = [{apth: '**', , component: MainComponent }]然后组件决定应加载哪个组件。

/// viewType is retrieved from backend
<app-articles *ngIf="viewType == 'article_categories' || viewType == 'articles'" [viewType]='viewType'></app-articles>
<app-videos *ngIf="viewType == 'video_categories' || viewType == 'video_page'" [viewType]='viewType'></app-videos>
<app-page-not-found *ngIf="viewType == 'page-not-found'" ></app-page-not-found>

对我来说，这似乎是很糟糕的解决方案，因为我无法使用RouterLink，并且每次单击都会重新加载整个网站。

也试图嵌套RouterOutlets，但无法使其起作用。

您有解决方案吗？

谢谢

Answer 1

如果我正确理解了您的问题，我相信一种解决方案是在后端使用Express Router处理您的路由。解释Express不在Stack Overflow的范围之内，但YouTube上有大量的教程。我建议Traversy Media制作“从前到后的MEAN堆栈”系列。它很旧，因此部分内容需要解决方法，但是他迄今为止设置路由器的工作流程是我今天与Angular一起使用的。

您的AppModule将包含：

routes: Routes = [
           {path:  '/pathA', , component: ComponentA },
           {path:  '/pathB', , component: ComponentB },
           {path:  '/pathC', , component: ComponentC, canActivate:[AuthGuard] },
]

但是实际的路由将通过后端的Express Router处理。

Node有很多路由器软件包； Express只是我使用的一种。