【Angular】URLのルーティングを任意の値に変えたい

Question

Angular初心者です。
公式チュートリアルを参考に簡易的な掲示板を作りながら勉強しているのですが
どうしてもわからないので教えてください。

掲示板の親記事を開くと親記事専用のページに遷移する簡単な仕組みを作りたいです。
親記事には公式チュートリアルのようにIDが割り振られており、そのIDを元に
「http://localhost:4200/bbs/${id}」のようにアクセスするとそのIDを持つ親記事は問題なく表示されます。

しかし、これをIDではなく以下のデータで言うとこのhashIDを使ってページ遷移させるとうまく動きません。
理想のURL「http://localhost:4200/bbs/${hashID}」。

URL自体は問題なくhashIDに飛んでるようなんですが、その後のthis.http.getがうまくいかず
何もブラウザに表示されません。

hashIDから値をとるためにはどのようにすればよいでしょうか？

■ DB(in-memory-data.service)

{ id: 1, hashID: '000000A', title: 'これはA' }
{ id: 2, hashID: '000000B', title: 'これはB' }
{ id: 3, hashID: '000000C', title: 'これはC' }

■ bbs.html

<a routerLink="/bbs/{{bbs.hashID}}"></a>

■ app-routing.module.ts

{ path: 'bbs/:hashID', component: BbsDetailComponent },

■ bbs-Detail.Component.ts

  getbbs(): void {
    var hashID = this.route.snapshot.paramMap.get('hashID');
    this.bbsService.getbbshashID(hashID).subscribe(i => this.bbs = i);
  }
  ngOnInit(): void {
    this.getbbs();
  }

■ bbs-Detail.Component.html

<div *ngIf="bbs">
    <div>{{bbs.id}}</div>
    <div>{{bbs.hashID}}</div>
    <div>{{bbs.title}}</div>
</div>

■ bbs.service.ts

  getbbshashID(hashID: string): Observable<bbs> {
    const url = `${this.bbsUrl}/${hashID}`;
    return this.http.get<bbs>(url);
  }

Comments

[m.ts10806]

Java はどう関係するのでしょうか

[inukujira]

大変失礼しました。JavaScriptの間違いでした

[miyabi_pudding]

getbbs(): void {
var hashID = this.route.snapshot.paramMap.get('hashID');
ここでは、ローカル変数のhashIDは取得できていますか？？

[inukujira]

はい。取得できています。

[miyabi_pudding]

では・・・・、
getbbshashID(hashID: string):での、
this.bbsUrlは取得できてますか？
また、thisの中には何がはいってますか？？

[inukujira]

本文にも書きましたが、getbbshashID先のthis.http.getで値が取れてないですね。

[miyabi_pudding]

もしかしたら、routerでのURLアクセス時に、
http://localhost:4200/bbs/${hashID}のような形式でアクセスさせる時は、
number型しか許可されてないのかもしれません。
（私も同じような形式でアクセスさせた時、string型の文字列をその形式で含めることはできなかった記憶がある）
すみません、ソースを見つけれてるわけではありません。
しかし、公式ドキュメントに記述あるかもしれません。
（ソース見つけましたら、回答します）
その、idと、hashIDの違いは、number型なのか、string型かの違いしかお見受けできないので、可能せはあるかと・・・。

もし、そうなのであれば、
苦肉の策として、
http://localhost:4200/bbs/?hashID=${hashID}
といった形にするしかないかと。
http.getではなく、Routerをインポートして、requestParamで、hashIDをつける必要がありますが、
それなら正常にアクセス、画面描画はできるはずです。

[miyabi_pudding]

いや、http.getでも、リクエストパラメータ付与してのアクセスできるかも。

[inukujira]

ん～、正しいやり方かどうかわかりませんが
以下で目的の動きを実装することができました。
これでいいのかなー、、、
-------------------------------------------------
getbbspid(hashID: string): Observable<bbs> {
const url = `${this.bbsUrl}/?hashID=${hashID}`;
return this.http.get<bbs>(url).pipe(map(bbs => bbs[0]));
}
-------------------------------------------------

[miyabi_pudding]

ううーん、正直妥協案な気も・・・。
でも、逆にこちらが正しいって場合もある気がします。
（先コメント通り、仕様的にstring型、”/変数”という形式ではできないパターン）
ひとまず、自己解決の投稿で質問閉じられるといいかと。
もしくは、もっと正しい答えをお求めなら、そのまま質問継続でもいいかと思いますが。
私も、もうちょっと探してみます。

[inukujira]

ありがとうございます！
私も継続して調査致しますので何かわかれば教えてくださると嬉しいです！^^