Question

我是Angular的新手，我需要一些建议

我在标头组件和路由器出口中使用引导导航栏（ul和li元素）。

run

我想根据当前显示的组件隐藏和显示某些导航栏项目。实现此目的的最佳做法是什么？

Answer 1

您可以尝试使用此解决方案。

我已经在Stackblitz上创建了一个演示

<div class="container">
<app-side-nav *ngIf="blankUrl || !isCheckoutRoute()"></app-side-nav>

<div id="main">
  <router-outlet></router-outlet>

</div>

</div>

Answer 2

有两种方法。

使它基于条件。使用 * ngIf 在需要时显示它。

请查看此答案以获取更多信息-Answer。

第二种也是最好的方法是使用模块处理此问题。

制作一个不包含导航栏的其他模块，然后放置不需要导航栏的组件。还有模块中其余需要导航栏的组件。

Answer 3

如果项目是动态流，则此您可以创建一个具有public类型的公共服务的全局服务，并在navbar上呈现此项目数组

每个组件中的第二步将注入全局服务，并使用ngOninit方法向服务中添加新项目，因此每次navbar都会具有当前组件项目。

如果项目已经在导航栏中渲染只需创建一个具有string属性的全局服务，该属性像flag一样，在ngOninit方法中分配组件标志值，例如'home'，'admin'，'setting'

<ul>
<li *ngIf="globalService.selectdFlag === 'home'">home 01</li>
<li *ngIf="globalService.selectdFlag === 'home'">home 02</li>
<li *ngIf="globalService.selectdFlag === 'admin'">admin 01</li>
<li *ngIf="globalService.selectdFlag === 'admin'">steeing 01</li>
<li *ngIf="globalService.selectdFlag === 'setting'">setting 01</li>
</ul>

快乐编码

Answer 4

也许不是最佳实践，因为我刚想到了，但是这是我的尝试：
您可以在您的AppHeaderComponent中注入{% with "5" as x %}并执行以下操作：

Router

因此，您可以在模板中使用export class AppHeaderComponent { currentRoute$: Observable<string>; showPostsNavbarItems$: Observable<boolean>; constructor(private activatedRoute: ActivatedRoute) { this.currentRoute$ = router.events.pipe( filter(event => event instanceof NavigationEnd), pluck('urlAfterRedirects') ); this.showPostsNavbarItems$ = this.currentRoute$.pipe( map(route => route === 'whatever') ); } } + *ngIf管道来显示/隐藏它们。

我不确定event.urlAfiterRedirects中的url看起来如何，但我还没有尝试过。

我希望我能帮助：）

显示基于可见组件的项目

4 个答案: