Question

我创建了一个webapp，它的外壳由app.components.html

呈现。

这个想法是页眉页脚保持不变，只是中间部分是动态的。中间部分基本上是几个包裹在ng-container中的角分量，如果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>

基于标题菜单项，我切换当前项的值，并渲染该组件。一切正常。现在，我们提出了一个要求，即我们希望客户创建自己的业务资料的业务资料。因此，基本上他们可以将URL输入为

site.com/biz/companyA site.com/biz/companyX

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

我们如何使URL保留在地址栏中？

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

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

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

Answer 1

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

角度解决路由器导航问题

1 个答案: