Опционально отображать навигационную панель в приложении Angular - PullRequest
Новая
       9

Опционально отображать навигационную панель в приложении Angular

0 голосов
/ 24 апреля 2020

Начинающий с AngularJS. Я хочу при желании отобразить мою боковую навигационную панель. Скажем, у меня есть 5 компонентов Home, SideBar, Page1, Page2 и Page3. Отображать боковую панель, если на домашней странице или странице 2, но не отображать на странице Page1 или странице 3. Какой-то псевдокод в моем app.component. html Мне бы хотелось что-то вроде этого: 

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

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

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Определите службу и напишите общий метод для установки значения в переменную

class 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);
}
0 голосов
/ 24 апреля 2020

Следующее является наилучшим оптимизированным способом достижения этого без особых изменений в существующем коде компонентов, и другим компонентам будет намного проще включить боковую панель.

Настройте маршрутизатор: 

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

Создание службы SidebarService для хранения / обновления значения, указывающего c для маршрутизации 

@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 }

в маршруте вы хотите включить боковую панель. Это лучший оптимизированный способ, который я знаю, и он может быть полезен и вам.

...