Angular боковая панель с использованием ng-sidebar в качестве компонента не работает

Question

Я создаю боковую панель переключения, используя ng-sidebar, которая находится здесь [https://www.npmjs.com/package/ng-sidebar] [1]

Я построил это внутри компонента, причина, по которой я это делаю, потому что я хочу показать боковая панель переключения только на четырех страницах, поэтому я не хочу вызывать то же самое на root app component.ts

Мой код для logot.component.ts выглядит так:

<ng-sidebar-container>
  <!-- sidebar -->
  <ng-sidebar [opened] = "opened">
    <button (click) = "toggleSidebar()">
      x
    </button>
    <ul class = "menu">
      <li>
        <span (click)="logout()">Logout</span>
      </li>
    </ul>

  </ng-sidebar>

  <div ng-sidebar-content>
    To open the sidebar
    <!-- Page Content -->
    <button (click) = "toggleSidebar()">
      Open sidebar
    </button>

  </div>
</ng-sidebar-container>

И код для logout.component.ts находится здесь

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'app-logout',
  templateUrl: './logout.component.html',
  styleUrls: ['./logout.component.css']
})
export class LogoutComponent implements OnInit {
  opened = false;

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  logout(){
    console.log('Logout');
    this.router.navigate(['/login']);
  }

  toggleSidebar(){
    this.opened = !this.opened;
  }
}

И я вызываю это дома вот так

<app-header></app-header>
<app-logout></app-logout>

  {{ home|json }}
  
<app-footer></app-footer>

Но содержимое дома | json идет после все содержимое app-logout. Я тоже пробовал это сделать

<app-header></app-header>
<app-logout>

  {{ home|json }}
  
</app-logout>
<app-footer></app-footer>

Но на этот раз дом | json не виден. Как я могу исправить это и где я ошибаюсь? Любая идея действительно применима. [1]: https://www.npmjs.com/package/ng-sidebar

Answer 1

Ранее ng-sidebar не использовался, из do c открытое свойство должно иметь двустороннюю привязку, попробуйте:

<ng-sidebar [(opened)]="_opened">

Answer 2

Попробуйте эти изменения и соответственно добавьте левое поле в компонент хоста.

logout.component. html

<ng-sidebar-container [class.vh-close]="!opened" [class.vh-open]="opened">
  <!-- sidebar -->
  <ng-sidebar [opened] = "opened">
    <button (click) = "toggleSidebar()">
      x
    </button>
    <ul class = "menu">
      <li>
        <span (click)="logout()">Logout</span>
      </li>
    </ul>

  </ng-sidebar>

  <div ng-sidebar-content>
    <button *ngIf="!opened" (click) = "toggleSidebar()">
      ->
    </button>

  </div>
</ng-sidebar-container>

logout.component. css

.vh-open {
  height: 100vh;
  width: 20vw;
  z-index: 3;
  position: fixed;
  background-color: aqua;
}

.vh-close {
  height: 100vh;
  z-index: 0;
  position: fixed;
  width: 5vw;
}