как скрыть / показать через кнопку заголовка в угловых

Question

Я добавил кнопку в заголовок, чтобы показать / скрыть панель навигации.поскольку кнопки и навигационные ящики находятся в разных компонентах, какой вариант лучше сообщать?

Пример демонстрации

Answer 1

«упрощенной» версией услуги является

//in header
<div *ngIf="shownavigation">....</div>

constructor(private globalDataService:GlobalDataService){}
get shownavigationn()
{
   return this.globalDataService.shownavigation
}

И

//In component
<button (click)="click()">Click me!</button>

constructor(private globalDataService:GlobalDataService){}
set shownavigationn(value)
{
   this.globalDataService.shownavigation=value
}
click()
{
    this.showNavigation=!this.showNavigation
}

Answer 2

Вы можете использовать сервис для сохранения состояния панели навигации.Для этого вы можете использовать Observable boolean в сервисе.Когда вы нажимаете кнопку, установите для нее значение true или false.Затем из компонента панели навигации подпишитесь на это свойство сервиса, чтобы скрыть содержимое в панели навигации.

В вашем сервисе

@Injectable()
export class GlobalDataService {
  private showNavigationBar = new Subject<boolean>();

  constructor() {

  }

  public getNavigationbarState(): Observable<boolean> {
    return this.showNavigationBar.asObservable();
  }

  public setNavigationbarState(value: boolean) {
    return this.showNavigationBar.next(notification);
  }
}

В кнопке компонента заголовкасобытие щелчка.

constructor(private globalDatServce:GlobalDataService) {

}

public onButtonClick(): void {
  this.globalDataService.setNavigationbarState(true); // pass true or false as needed
}

В конструкторе компонентов панели навигации.

constructor(private globalDatServce:GlobalDataService) {
   this.globalDatServce.getNavigationbarState().subscribe((res) => {
     this.shownavigation = res;
   });
}

В шаблоне

<div *ngIf="shownavigation">
  // navigation content goes here
</div>