Как использовать панель навигации Angular 9 с роутером-розеткой вне app.component

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>

Это отлично работает следующим образом Маршрутизация к компоненту ведения журнала при нажатии на регистрацию

Маршрутизация для регистрации компонента при нажатии на регистр

Но когда я выбираю другой компонент в моем маршруте, панель навигации все еще существует. нужна моя панель навигации с ведением журнала и регистрация только в моем домашнем компоненте. Она не должна существовать, когда я маршрутизирую другие компоненты. Я думаю, что если я напишу свой код внутри другого компонента, кроме app.component, он будет работать. Но как я могу использовать маршрутизатор -outlet и все на другом компоненте. Пожалуйста, помогите с примером. Как я могу это реализовать?

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

Надеюсь, это поможет вам.