angularjs 检查currentRoute是否以Angular 中的一些文本(某物/某物/*...)开始

62lalag4  于 2023-02-07  发布在  Angular
关注(0)|答案(1)|浏览(141)

我想阻止loader从一些屏幕加载,因此我在不需要loader的路径上应用了ngIf。下面是app.component.ts的代码:

<router-outlet>
  <app-spinner></app-spinner>
  <ngx-ui-loader *ngIf="!(currentRoute =='/dashboard' || currentRoute == '/vehicle/edit/')"></ngx-ui-loader>
</router-outlet>

app.component.html

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

我需要添加 * 到车辆/编辑URL,因为可以有任何车辆ID,而提取编辑页面,如:/vehicle/edit/49042/1422/vehicle/edit/49023/1421等等。
如何允许当前路线接受/车辆/编辑/*?

vltsax25

vltsax251#

好的,现在来回答你关于接受动态URL/所有以/vehicle/edit/开头的URL的路由的问题。
如果你知道你的嵌套有限制,那么“虚拟”方法就是用参数声明多个路由,大致如下:

const routes: Routes = [
  { path: '/vehicle/edit/', component: VehicleListComponent },
  { path: '/vehicle/edit/:id', component: VehicleEditComponent },
  { path: '/vehicle/edit/:parent/:id', component: VehicleEditComponent },
  { path: '/vehicle/edit/:grandparent/:parent/:id', component: VehicleEditComponent },
];

这将工作,因为Angular 路由停止在第一个匹配的路径,所以你的路由声明的顺序是很重要的!
但是,如果您要处理非常长的嵌套功能,更好的方法是使用自定义路由匹配器:

import { UrlSegment } from '@angular/router';

const nestedCategoryMatcher = (url: UrlSegment[]) => {
  // Check if this regex actually match your requirements
  const regexMatcher = /^(vehicle\/edit)([\/][0-9]+.+)/;

  if (!url.join('/').match(regexMatcher)) return null;

  return ({ consumed: url });
}

const routes: Routes = [
  { path: '/vehicle/edit/', component: VehicleListComponent },
  { matcher: nestedCategoryMatcher, component: VehicleEditComponent },
];

请记住,使用matcher时,您将不得不通过将URL拆分为段来手动检索组件中的“参数”。

this.route.url
  .subscribe(segments => {
    const urlSegment: UrlSegment[] = (segments as UrlSegment[]);
    console.log(urlSegment);
  });

相关问题