Angular 解决路由器导航问题

Question

我已经创建了我们的网络应用程序，它具有从 app.components.html

渲染的外部 shell

想法是 header 页脚保持不变，只有中间部分是动态的。中间部分基本上是包裹在 ng-container 中的几个 angular 组件，如果 currentItem == 'some value'.

则渲染

<ng-container *ngIf="current-item === 'contact'>
   <app-contact-component></app-contact-component>
</ng-container>
<ng-container *ngIf="current-item === 'about'>
   <app-about-component></app-about-component>
</ng-container>
<ng-container *ngIf="current-item === 'service'>
   <app-service-component></app-service-component>
</ng-container>
<ng-container *ngIf="current-item === 'business'>
   <app-business-component></app-business-component>
</ng-container>

基于 header 菜单项，我切换 current-item 值并呈现该组件。这工作正常。现在，我们提出了一个要求，我们希望我们的客户创建他们的业务配置文件的业务配置文件。所以，基本上他们可以输入 URL as

站点。com/biz/companyA 网站.com/biz/companyX

我们使用 activatedRoute 实现了代码，并且也能够读取路径参数。唯一的问题是，当用户执行以上操作时，浏览器中的 URL 不会保留并更改为 site.com

我们如何让 URL 持续存在于地址栏中？

我们尝试了一种技术，我们向路由器添加了一条新路由，如下所示

const routes: Routes = [
  {path: '', redirectTo: '', pathMatch: 'full'},
  {path: 'biz/:id', component: BusinessProfileComponent}
];

上面的问题是页面混乱，因为它试图呈现基础页面上的所有内容以及 businessProfileComponent。

Answer 1

我不得不稍微调整一下我的布局，现在使用而不是在中间或外部嵌入组件 shell，我将整个布局分为顶部和底部。上面的 app.html 中，顶部现在是静态渲染。其他所有内容现在都根据路由器导航呈现在其下方。

Angular 解决路由器导航问题

Angular solving router navigation issue

router

angular