Как я могу обработать URL с двойной косой чертой в angular?

Question

По устаревшим причинам мне необходимо обработать маршрут, где существует вероятность того, что будет два слеша назад, потому что в пути есть необязательный идентификатор (например, / base // child / 2). Я не могу изменить URL в любом случае (например, пропуская двойную косую черту в пользу вторичного маршрута). Можно ли в любом случае заставить маршрутизатор angular распознать этот URL-адрес и либо перенаправить его, либо обработать?

Answer 1

Кажется, Angular не может правильно проанализировать URL с двойной строкой sh, поэтому отображение пути маршрутизации не будет работать. Вы можете реализовать свой собственный UrlSerializer вместо использования по умолчанию DefaultUrlSerializer. Попробуйте преобразовать путь "/ base // child / 1" в "/base/child/1".

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';
export class CustomUrlSerializer implements UrlSerializer {
  parse(url: any): UrlTree {
    let dus = new DefaultUrlSerializer();
    console.log(url);
    if(/\/\//.test(url)) {
      url = url.replace(/\/\//, '/');
    }
    return dus.parse(url);
  }
  serialize(tree: UrlTree): any {
    let dus = new DefaultUrlSerializer(),
    path = dus.serialize(tree);
    return path;
  }
}

Зарегистрируйте его в app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { RouterModule, UrlSerializer } from '@angular/router';
import { CatchAllComponent } from './catch-all/catch-all.component';
import { InformedComponent } from './informed/informed.component';
import { CustomUrlSerializer } from './custom-url-serializer';

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([{
      path: 'base/child/:id',
      component: InformedComponent,
    }, {
      path: 'base/:parentId/child/:id',
      component: InformedComponent
    }, {
      path: '**',
      component: CatchAllComponent
    }])
  ],
  declarations: [ AppComponent, CatchAllComponent, InformedComponent ],
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Сейчас URL с двойным sla * sh "//" будет преобразован в "/". Он будет соответствовать пути маршрутизации "base / child /: id", поэтому вы можете получить параметры и обработать их.

Answer 2

Я бы попробовал с UrlMatcher что-то вроде этого

matcher.ts

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

export function matcher(url:  UrlSegment[]) {
  console.log(JSON.stringify(url));
 return url.length === 1 && url[0].path === 'base' ? ({consumed: url}) : null;
}

маршруты

import  { matcher } from './matcher';

RouterModule.forRoot([{
  matcher: matcher,
  component: InformedComponent
}, {
  path: 'base/:parentId/child/:id',
  component: InformedComponent
}, {
  path: '**',
  component: CatchAllComponent
}])
]

Попробовал это с ваш стекблиц, и это работает. Не уверен, но другие опции могут быть прослушивать событие запуска навигации маршрутизатора или охрану маршрута.