Давайте разберем проблему на небольшую:
app.module.ts
const routes: Routes = [
{
path: '',
// pathMatch: 'full',
children: [
{
path: 'foo',
component: FooComponent
},
],
},
{
path: '**',
component: NotFoundComponent,
}
];
app.component. html
<router-outlet></router-outlet>
<button routerLink="/foo">go to foo</button>
демо ng-run .
Если мы щелкнем по кнопке, маршрутизатор Angular запланирует переход маршрута . Это включает в себя довольно интересный процесс, который состоит из нескольких фаз , .
Одна из этих фаз называется Применить перенаправления , и именно здесь перенаправления разрешаются и где NoMatch ошибки происходят из. Здесь также можно найти больше информации о pathMatch: 'full'. На этом этапе он будет go через каждый объект конфигурации и попытается найти первый из них, который соответствует выданному URL-адресу (например, /foo).
Сначала он столкнется с этим one (это происходит в matchSegmentAgainstRoute):
{
path: '',
// pathMatch: 'full',
children: [
{
path: 'foo',
component: FooComponent
},
],
},
тогда будет вызвана функция match:
const {matched, consumedSegments, lastChild} = match(rawSegmentGroup, route, segments);
здесь мы останавливаемся на route.path === '':
if (route.path === '') {
if ((route.pathMatch === 'full') && (segmentGroup.hasChildren() || segments.length > 0)) {
return {matched: false, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
}
return {matched: true, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
}
Итак, вот один случай, когда опция pathMatch имеет значение. При текущей конфигурации (pathMatch не задано) будет достигнуто
return {matched: true, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
, а затем он перейдет к go через массив children. Итак, в этом случае FooComponent будет успешно отображаться.
Но если у нас есть pathMatch: 'full', тогда выражение
if ((route.pathMatch === 'full') && (segmentGroup.hasChildren() || segments.length > 0)) { }
будет true, потому что segments.length > 0, в данном случае сегменты - ['foo']. Итак, мы получим matched: false, что означает, что FooComponent не появится в представлении.