Как обрабатывать изменения маршрутизации Angular 2+ (7) без рефакторинга?

Question

В настоящее время рекомендуется использовать массив маршрутов, который будет выглядеть примерно так:

const appRoutes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'page1', component: Page1Component },  // can't use RouterStringService here I don't think...
    { path: 'page2', component: Page2Component }
]
@NgModule({...})
export class AppRouting Module {}

Это все хорошо и хорошо. Мы можем использовать это для навигации:

• ts файлы - router.navigate(['/page1'])
• HTML-файлы - [routerLink]="/page1"

Cool. Это прекрасно работает. Однако, что произойдет, если нам нужно изменить page1 на home-feed (или что-то, что не page1)? Рефакторинг строковых литералов - лаваш и просит проблем (особенно в html). Мы можем использовать перенаправления так:

// changes to above code block
{ path: 'page1', redirectTo: 'new-page1' },
{ path: 'new-page1', component NewPage1Component },

Но это только добавляет умственные издержки запоминания перенаправлений, потому что другие ссылки на код все еще потенциально будут router.navigate(['/page1']).

Мы также можем использовать сервис, который импортируется почти везде. Это (если я не ошибаюсь) не будет использоваться в appRoutes, потому что оно объявлено вне модуля? (это отмечено в первом блоке кода)

export class RouterStringService {
    static page1: string = '/page1'
    static page2: string = '/page2

    // put string builders here too for things like /pageX/:id

    constructor() {}
}

Как вы, ребята, справляетесь с этим? Я знаю, что рефакторинг не идеален, но бывают случаи, когда это должно произойти. В основном меня беспокоит отсутствие маршрутизации, потому что угловые 7 толкают, используя строковые литералы. Используете ли вы e2e-тестирование, чтобы поймать это, или вы можете это исправить программным путем?

Answer 1

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

Если вам нужно изменить точные строковые литералы, вы можете сделать это в одном месте.

На эти объекты конфигурации можно ссылаться из файлов TS или из шаблонов HTML, , если вы экспортируете их в шаблон в соответствующем компоненте.

Например: urls.ts файл где-нибудь в активах или в любой другой папке:

export const AppUrls = {
    base: "...",
    login: "...",
    ...
} 

в файлах ts:

   import {AppUrls} from '..../urls.ts';

    const appRoutes: Routes = [
        { path: '', redirectTo: AppUrls.login, pathMatch: 'full' },

в шаблонах, сначала вы экспортируете его:

import {AppUrls} from '..../urls.ts';

@Component({
  selector: '...
})
export class SomeComponent implements OnInit {

  AppUrls = AppUrls;

и в html:

[routerLink]="{{AppUrls.login}}"

Кроме того, router.navigate(['/page1']) не требует косой черты, и вы можете разделять различные URL-адреса в виде записей массива: router.navigate(['firstpart', 'secondpart']) -> это приведет вас к /firstpart/secondpart