Мне нужно скрыть определенные компоненты с моей главной домашней страницы, такие как панель навигации и нижний колонтитул, когда я вошел в свою панель администратора. Мои административные компоненты загружаются лениво на основе модуля администратора при вызове. ...

1
surjendu_dey 19 Дек 2020 в 13:30

1 ответ

Лучший ответ

Здесь вам нужно определить регулярные выражения и протестировать их. Или, может быть, вам достаточно проверить функцию string#includes(string). Я также предлагаю использовать более реактивный (например, rxjs) подход.

В моем шаблоне у меня было бы:


<div class="main__container">
  <app-navbar *ngIf="canShowNavBar$ | async">
  </app-navbar>
  <app-footer *ngIf="canShowFooter$ | async">
  </app-footer>
</div>

Где в файле машинописного текста я бы имел:

export class YourComponent implements OnInit {

   canShowNavBar$: Observable<boolean>;
   canShowFooter$: Observable<boolean>;
   navigationEvents$: Observable<NavigationEnd>;


   constructor(private router: Router){}

   ngOnInit() {
     // Like this we define the stream of the NavigationEnd events
     this.navigationEvents$ = this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        // This one is not really needed but we're giving some hints to the typescript compiler
        map(event => event as NavigationEnd) 
      );
      // Here we define the stream of booleans that determine whether to show the component or not on your template.
      this.canShowNavBar$ = this.navigationEvents$.pipe(
         map(event => this.shouldShowNavBar(event.url))
      );
      // Because actually you check for the same conditions
      this.canShowFooter$ = this.canShowNavBar$;
   }

   shouldShowNavBar(url: string): boolean {
      // And here you should test against regular expressions:
     switch(true) {
        case /\/admin\/dashboard/.test(url):
        case /\/admin\/category/.test(url):
        // More cases where you should show the navBar
           return true;
        default: return false;
     }



   }
   
}

Вы можете узнать больше о регулярных выражениях в JavaScript здесь

Другой подход к реализации shouldShowNavBar мог бы заключаться в использовании некоторых предикатов массива, например some: Примерно так:


shouldShowNavBar(url: string): boolean {
   const conditions = [
      !url.startsWith('/admin/dashboard'),
      !url.includes('/admin/category'),
      // More conditions?
   ];
   return conditions.some(isTrue => isTrue);
}

Если вы не хотите использовать асинхронный режим, оставьте свой код таким, каким он был, но сделайте следующее:


<div class="main__container">
  <app-navbar *ngIf="shouldDisplayNavBar(url)">
  </app-navbar>
  <app-footer *ngIf="shouldDisplayNavBar(url)">
  </app-footer>
</div>


shouldShowNavBar(url: string): boolean {
   if(!url) {
     return false;
   }

   const conditions = [
      !url.startsWith('/admin/dashboard'),
      !url.includes('/admin/category'),
      // More conditions?
   ];
   return conditions.some(isTrue => isTrue);
}
1
Some random IT boy 19 Дек 2020 в 11:56