Question

我对angular还是比较陌生，我正在尝试使用一项服务来显示和隐藏侧边栏。我显示了侧边栏的工作原理，但是后来意识到我的侧边栏关闭按钮不是具有切换按钮的父组件的一部分。因此，我认为最好的方法也许是使用一种服务来控制切换和状态，因为这两个组件都将使用它（潜在的改进值得赞赏）。

我收到的错误是：Property 'navigationService' is private and only accessible within class 'AppComponent'.可以通过将其声明为public而不是private来解决，但我担心的是我的切换按钮位于AppComponent中，因此不确定该问题（感觉像我某处出错了。

app.component.html：

<div class="container-fluid">
    <div class="row">
        <app-sidebar *ngIf="showSideBar; else toggleMenu" class="col-md-2 bg-dark" style="display:block; height: 100vh;"></app-sidebar>
        <ng-template #toggleMenu>
            <div class="col-md-2"><fa-icon [icon]="faBars" (click)="navigationService.toggleSideBar()" style="cursor: pointer;"></fa-icon></div>
        </ng-template>
    </div>
</div>

app.component.ts：

import { Component } from '@angular/core';
import{ faBars } from '@fortawesome/free-solid-svg-icons';
import { NavigationService } from './navigation/navigation.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [NavigationService]
})

export class AppComponent {
  title = 'my-pmo';
  showSideBar: boolean = false;
  faBars = faBars;

  constructor(private navigationService: NavigationService) {}

}

navigation.service.ts：

export class NavigationService {
    showSidebar: boolean = false;

    toggleSideBar() {
        this.showSidebar = !this.showSidebar;
    }
}

任何其他可以改进此问题的方式，我都会很高兴地加入，因为现在我可以看到为什么此框架有一个学习曲线。（所需的任何其他信息，如** k）

Answer 1

在Angular中，您无法访问模板（HTML）中的私有字段。我建议将其设置为公共字段，或使用包装函数。

export class AppComponent {
  title = 'my-pmo';
  showSideBar: boolean = false;
  faBars = faBars;

  constructor(private navigationService: NavigationService) {}

  toggleSideBar() {
     this.navigationService.toggleSideBar()
  }

}

此外，您在AppComponent.ts中拥有的showSideBar: boolean = false;不会为您做任何事情，因为它从未设置。

您可以将其更改为get函数：

public get showSideBar(): boolean {
   return this.navigationService.showSideBar
}

这样，您仍然可以在模板中访问它而没有任何问题。

这全部来自内存，所以我可能犯了一个错误，但是据我所知，这应该可以解决您遇到的错误问题。

在Angular中切换侧边栏

1 个答案: