如何在另一个组件中显示/隐藏链接？

Question

我在Angular中有以下主要组件app.component的结构：

<div class="links">
    <div class="link_1"></div>
    <div class="link_2"></div>
</div>
<router-outlet></router-outlet>

所以在<router-outlet></router-outlet> 中替换了不同的组件。

如果<router-outlet></router-outlet>内部有组件，如何隐藏<div class="link_1"></div>作为实例EventComponent？

如果它是另一个组件，如何显示<div class="link_2"></div>，不管是哪个。我想知道如何显示/隐藏上面的菜单元素取决于下面的当前组件。

我不想在每个组件中创建变量public show = true;

Answer 1

尝试将路由器包含在带有路由器插座的组件中，并查找与所选链接对应的路径，例如

constructor(private _router: Router ) {}

get currentUrl() { return this._router.url; }

然后在你的模板中

<div *ngIf="currentUrl !== 'someUrl'" class="link_1"></div>