Блог

Главная - Вопросы по программированию - угловая относительная маршрутизация работает не так, как ожидалось

угловая относительная маршрутизация работает не так, как ожидалось

#angular #angular-routing #angular-router #routerlink

Вопрос:

Я разрабатываю приложение с использованием angular. В моем приложении есть два вида пути:

тип 1:

  • http://localhost:4203/121/index (121-идентификатор продавца)
  • http://localhost:4203/121/bill/tci
  • http://localhost:4203/121/bill/mci
  • http://localhost:4203/121/profile/dashboard

тип 2:

  • http://localhost:4203/index (по умолчанию без идентификатора продавца)
  • http://localhost:4203/bill/tci
  • http://localhost:4203/bill/mci
  • http://localhost:4203/profile/dashboard

поэтому я сделал приведенный ниже код в модуле маршрутизации приложений:

 export const routes: Routes = [
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module')
      .then(m => m.ProfileModule),
  },
  {
    path: ':mid/profile',
    loadChildren: () => import('./pages/profile/profile.module')
      .then(m => m.ProfileModule),
  },
  {
    path: 'bill',
    loadChildren: () => import('./pages/bill/bill.module')
      .then(m => m.BillModule),
  },
  {
    path: ':mid/bill',
    loadChildren: () => import('./pages/bill/bill.module')
    .then(m => m.BillModule),
  },
  {
    path: 'index',
    component: IndexComponent,
  },
  {
    path: ':mid/index',
    component: IndexComponent,
  },
  {
    path: 'auth-callback',
    component: AuthCallBackComponent,
  },
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

Я создал некоторый библиотечный компонент в другом проекте, и он добавлен в этот проект.
вот мой карточный компонент:

 <div class="solution_card">
  <a [routerLink]="defaullink">
    <div class="hover_color_bubble"></div>
    <a *ngFor="let icon of defaultMenu.icons" [routerLink]="icon.link" class="float-start icons">
      <i [class]="icon.title"></i>
    </a>
    <div class="so_top_icon">
      <img [src]="defaultMenu.img" />
    </div>
    <div class="solu_title">
      <h3>{{defaultMenu.title}}</h3>
    </div>
    <div class="solu_description">
      <p>
        {{defaultMenu.subTitle}}
      </p>
    </div>
  </a>
</div>

и в компонентном модуле я определил ссылки по умолчанию:

   public defaullink:string = '../test2';
  public defaullink2:string = '../123231321';

когда я использовал этот компонент в своем проекте, я ожидал результатов, как показано ниже:

(Я поместил компонент в index.html.ts)

  • на странице: http://localhost:4203/121/index ===> ссылка на: >http://localhost:4203/121/test2
  • на странице: http://localhost:4203/index ===> ссылка на: >http://localhost:4203/test2

но на обеих страницах ссылка такова: http://localhost:4203/test2

пожалуйста, помогите мне

Ответ №1:

Можете ли вы попытаться изменить путь к строке ссылки, чтобы удалить ../ ее в начале и заменить на ./ ?

   public defaullink:string = './test2';
  public defaullink2:string = './123231321';

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

Я также вижу, что вы используете его в компоненте (он может быть на разных уровнях страницы), поэтому, возможно, будет лучше использовать абсолютные пути, как это было бы возможно для ваших нужд, добавив префикс просто / 

   public defaullink:string = '/test2';
  public defaullink2:string = '/123231321';

Вы также можете ознакомиться с документацией по следующим вопросам: https://angular.io/api/router/RouterLink#relative-link-paths

Сопоставитель URL-адресов

Я также думаю, что вы не включаете маршрут для индексной страницы без суффикса индекса, например:

 {
    matcher: (url) => {
        if (url.length === 1 amp;amp; url[0].path.match(/^[d] $/gm)) {
            return {
                consumed: url,
                mid: new UrlSegment(url[0].path.substr(1), {})
            };
        }
        return null;
    },
    component: IndexComponent
},
...

Использование сопоставления на маршрутах (оно должно быть поверх других возможных, которые могли бы соответствовать искомому пути) может фильтровать только некоторые регулярные выражения или другие проверки. Он вернет объект маршрутизации, если будет найдено совпадение, или значение null, если маршрутизатору необходимо продолжить оценку следующих. Документ UrlMatcher

Метки: ,