如何在app.component外使用带有router-outlet的Angular 9导航栏

Question

我是 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>

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

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

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

Answer 1

在 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');
  }
});

希望这会帮助你。