web-dev-qa-db-ja.com

Angular 4：ルートへのルーティングが機能しない

Angular 4には、理解できないルーティングの基本的な概念があります。

index.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

Header.component.htmlにリンクがあります：

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

これをクリックすると、localhost：4200/collectionsに移動します。ボタンがクリックされると、URLがプログラムで変更されます（collection.component.ts内）：

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

私はlocalhost：4200/collections/nameに行き着きます-大丈夫です。プログラムで/ collections（collectioninfo.component.ts内）に戻りたいと思います：

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

しかし、それはうまくいきません。 URLは変更されず、パラメーターを読み込めなかったというエラーが表示されます。そのため、/ collections/nameが再度読み込まれているようです。パスの問題かもしれませんが、次のようなことも機能しません。

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

追加情報：/ collectionsで手動でページを再読み込みすると、再びホームページに転送されますが、これは別の問題であり、この動作とは関係ありません。

app.routing.ts：

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];
angulartypescriptangular2-routingangular4-router
9
user3255061

私のfirebaseコードがめちゃくちゃになっていることがわかります-それは別のルートに行く前にページをリロードしようとします。以前のルートから引き渡された一部のパラメーターが欠落していたため、これによりエラーが発生しました。

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

app.routing.tsはデバッグに非常に役立ちました。

2
user3255061

相対パスthis.router.navigate(['../collections']);で、_localhost:4200/collections/collections_に移動しようとしています。 this.router.navigate(['../']);をお試しください

これが機能しない場合は、ActivatedRouteをrelativeToパラメーターとして指定します。

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

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

relativeToは、指定したエントリに関連するパスを作成することで機能します。必ずしも現在のルートである必要はありません。

4
tgrass12