Угловой 4: маршрутизация на маршрут не работает

существует некоторая фундаментальная концепция маршрутизации в Angular 4, которую я не понимаю.

.HTML-код:

<base href="/">

структура файла:

- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts

у меня есть ссылка в моем заголовке.деталь.HTML-код:

<a class="nav-link" [routerLink]="['/collections']">
    Collections
</a>

если я нажму на него, я приземлюсь на localhost: 4200 / collections. При нажатии кнопки, URL-адрес программно изменяется (в коллекции.деталь.ts):

this.router.navigate(['/collections/', collection.name]);

Я в конечном итоге на localhost: 4200 / коллекции / имя-все в порядке. Теперь я программно хочу вернуться к / collections (в collectioninfo.деталь.ts):

this.router.navigate(['/collections']);

но это не сработает. Url-адрес не меняется, и я получаю сообщение об ошибке, в котором говорится, что параметр не может быть загружен, поэтому, по - видимому, /collections/name загружается снова. Думал, что это может быть проблема пути, но такие вещи также не работают:

this.router.navigate(['../collections']);

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

app.маршрутизирующий.ТС:

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];
6
angular angular2-routing angular4-router typescript

2 ответов

в вашем относительном пути this.router.navigate(['../collections']); вы пытаетесь перейти к localhost:4200/collections/collections. Попробуй!--3-->

если это не работает, также поставьте ActivatedRoute в качестве параметра relativeTo:

constructor(route: ActivatedRoute, router: Router) {}

navigate() {
  this.router.navigate(['../'], { relativeTo: this.route });
}

relativeTo работает, создавая путь относительно любой записи, которую вы предоставляете, и это не обязательно должен быть текущий маршрут.

3

оказывается, мой код firebase испорчен - он пытается перезагрузить страницу перед переходом на другой маршрут. Это вызвало ошибку, потому что некоторые параметры, переданные с предыдущего маршрута, отсутствовали.

export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })

в приложение.маршрутизирующий.ТС был очень полезен для отладки.

1