可选择在 Angular App 中显示导航栏答案

【问题标题】：Optionally display nav bar in Angular App可选择在 Angular App 中显示导航栏
【发布时间】：2020-04-23 21:55:55
【问题描述】：

AngularJS 初学者。我想有选择地显示我的侧导航栏。假设我有 5 个组件 Home、SideBar、Page1、Page2 和 Page3。如果在 Home 或 Page2 上显示 SideBar，但在 Page1 或 Page3 上不显示。我的 app.component.html 中有一些伪代码我想要这样的：

<app-sidebar></app-sidebar>  //Display for Home, Page2
<router-outlet></router-outlet>

最佳实践方式是什么？实现这一目标的快速而肮脏的方式是什么？我在使用 CanActivate 的登录页面的上下文中看到了类似的行为，但无法真正弄清楚它如何满足我的需求。

【问题讨论】：

你可以使用服务并创建对象，将这个对象连接到导航栏按钮，当你在服务中更改数据时，你的导航栏将被更新
app-sidebar 本身可以订阅由您想要的任何页面明确设置的事件“显示或隐藏”。这是一种方法。 dev.to/jwp/the-angular-event-service-ech

标签： angular navbar

【解决方案1】：

定义服务并编写一个通用方法将值设置为变量

类 helperService {

 public bSubject: BehaviorSubject<boolean> = new BehaviorSubject(true);

    setNavBar(val){
       this.bSubject.next(val);
    }
 public getNavBar(): boolean {
        return this.bSubject.value;
    }
}

在每个组件中

 if (this.helperService.getNavBar()) {
      this.show=true;
    }else{
this.show=false;
}

并根据设置

ngOninit(){

this.helperService.setNavBar(false);
}

【讨论】：

【解决方案2】：

以下是实现这一目标的最佳优化方式，无需对现有组件代码进行太多更改，并且其他组件也更容易启用侧边栏。

配置你的路由器：

  {
    path: "home",
    component: HomeComponent,
    canActivate: [AuthGuard],
    data: { sidebar: true }
  },

创建一个 SidebarService 来保存/更新特定于路由的值

@Injectable({
    providedIn: "root"
})
export class SidebarService {

  private showSidebar$ = new BehaviorSubject<Boolean>(false);

  constructor() { }

  setValue(value: boolean) {
    this.showSidebar$.next(value);
  }

  getValue() {
    this.showSidebar$.value;
  }

  getValue$() {
    this.showSidebar$.asObservable;
  }

}

现在在你的 AuthGuard 中

@Injectable({
   providedIn: "root"
  })
 export class AuthGuard implements CanActivate, CanActivateChild, CanDeactivate<any> {

   constructor(private router: Router,
    private sidebarService : SidebarService ) { }

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const showSidebar = route["data"]["sidebar] || false;
     this.sidebarService.setValue(showSidebar );
  }
}

现在在选择器中添加 *ngIf 并注入 SidebarService 组件中的服务。

在组件中

constructor(private sidebarService : SidebarService ) { }

get showSideBar(){
  return this.sidebarService.getValue$();
}

在 HTML 中

<app-sidebar *ngIf="showSideBar | async"></app-sidebar> // Use either async pipe or you can have a variable and updating its value by subscribing to this.sidebarService.getValue$()

现在你只需要添加

data: { sidebar: true }

在您要启用侧边栏的路线中。这是我所知道的最佳优化方式，也可能对您有用。

【讨论】：

感谢您的详尽回答。我会试一试的。