根据可见组件显示项目答案

【问题标题】：Show items based on visible component根据可见组件显示项目
【发布时间】：2018-12-19 09:10:05
【问题描述】：

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

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

<app-header></app-header>
<router-outlet></router-outlet>

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

【问题讨论】：

标签： angular angular-components

【解决方案1】：

你可以试试这个解决方案。

我在Stackblitz创建了一个演示

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

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

</div>

</div>

【讨论】：

【解决方案2】：

有两种方法可以做到这一点。

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

请查看此答案以了解更多信息 - Answer。

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

制作一个不包含导航栏的不同模块并放置不需要导航栏的组件。以及模块中需要导航栏的其余组件。

【讨论】：

【解决方案3】：

如果项目是动态流这个您可以创建一个具有数组类型的公共属性的全局服务，并在导航栏上呈现此项目数组

第二步在每个组件中注入全局服务，并在 ngOninit 方法中将新项添加到服务中，因此每次导航栏都会有当前组件项。

如果项目已经在导航栏中呈现只需创建一个具有字符串属性的全局服务，此属性类似于标志，在 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>

快乐编码

【讨论】：

【解决方案4】：

也许不是我刚刚提出的最佳实践，但这是我的尝试：
您可以在 AppHeaderComponent 中注入 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 + async 管道来显示/隐藏它们。

虽然我不确定 event.urlAfiterRedirects 中的 url 是什么样子，但我还没有尝试过。

希望能帮到你:)

【讨论】：