时间戳

首页 > 解决方案 > 如何在 app.component 外使用带有路由器插座的 Angular 9 导航栏

javascript - 如何在 app.component 外使用带有路由器插座的 Angular 9 导航栏

问题描述

我是 angular 的初学者。我创建了一个导航栏，这是我在 app.component 中的代码

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div>
       <a routerLink="/login">Login</a>
       <a routerLink="/register">Register</a>
    </div>
  </div>
</nav>
<div>
  <router-outlet></router-outlet>
</div>

这可以正常工作如下 单击日志记录时路由到日志记录组件

单击注册时路由到注册组件

但是当我在路由中选择另一个组件时，导航栏仍然存在。所以我需要我的导航栏进行日志记录，并且只在我的 Home 组件中注册。当我路由其他组件时它不应该存在。我想如果我在里面写我的代码除了 app.component 之外的另一个组件它可以工作。但是我怎样才能使用路由器插座和另一个组件上的所有东西。请帮忙举个例子。我该如何实施？

标签： javascriptangularnavigationangular9router-outlet

解决方案

在 app.component.html 添加到

<nav *ngIf="isHomePage" class="navbar navbar-default"></nav>

在 app.component.ts -> ngOnInit()

this.router.events.subscribe(e => {
 if (e instanceof RouterEvent) {
   this.isHomePage = e.url.split('/').includes('home');
  }
});

希望这会帮助你。

推荐阅读