时间戳

首页 > 解决方案 > 在某些动态路线中隐藏Angular中的组件

javascript - 在某些动态路线中隐藏Angular中的组件

问题描述

当我登录到我的管理面板时，我需要从我的主页中隐藏某些组件，例如导航栏和页脚。我的管理组件在调用时基于管理模块延迟加载。如果路由不是动态的，即 like 等，则在管理视图中必要的组件会按预期隐藏/admin/login。/admin/dashboard但是如果路由是动态的，/admin/category/:categoryId或者/admin/user/:userId在这些路由中，导航栏和页脚等必要组件不会隐藏自己. 我正在获取ActivatedRoute在必要组件中使用的路由的动态 ID。下面是我在主页上用来读取应用程序路由并相应地显示/隐藏组件的方法。

Main.ts

 import { Router, NavigationEnd } from '@angular/router';

  public url: any;

  constructor(private router: Router) {

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.url = event.url;
      }
    })
  }

主.html

<div class="main__container">
  <app-navbar
    *ngIf="url !== '/admin' && url !== '/admin/dashboard' && url !== '/admin/post-article' && url !== '/admin/video' && url !== '/admin/login' && url !== '/admin/sign-up' && url !== '/admin/category/:categoryId'">
  </app-navbar>
  <app-footer
    *ngIf="url !== '/admin' && url !== '/admin/dashboard' && url !== '/admin/category/:categoryId' && url !== '/admin/post-article' && url !== '/admin/video' && url !== '/admin/login' && url !== '/admin/sign-up'">
  </app-footer>
</div>

标签： javascriptangularangular-routingangular-componentsangular-activatedroute

解决方案

您需要在这里定义正则表达式并对其进行测试。或者也许它足以让您检查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);
}

推荐阅读