Angular URLで状態管理 クエリパラメータを取得し、特定のアドレスバーで表示したい

Question

実現したいこと

• 1. /route-practice という route でアクセスできるページを作成する

ページは <input> と <button> を持つ

• 1. テキストを入力し、ボタンを押下すると、URL が /route-practice?text=<入力中の値> に書き換わる
• 1. ブラウザのアドレスバーで直接 /route-practice?text=foo の形でページを開いたとき、 query parameter から入力フォームにテキストを復元する

詰まっているところ

• 3で詰まっている
• クエリパラメータの取得し、指定のアドレスバーへの指定

  <input id="new-hero" #addText />
  <button class="add-button" (click)="addtext(addText.value); addText.value=''">test</button>
  

  ngOnInit(): void {
   this.route.snapshot.queryParams.get(this.text);
  }
  
  addtext(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.router.navigate([ '/route-practice' ], { queryParams: { text: name,} }
    );
  }

すみませんが知識をお借りしたいです。

Answer 1

こんな感じでしょうか？
まずts 側にメンバー変数を用意します。

TypeScript

paramFromQuery: string | null = null;

次にngOnInit() でクエリパラメータを受け取りと、先ほどのメンバー変数への代入をします。

TypeScript

ngOnInit(): void {
    this.paramFromQuery = this.route.snapshot.queryParamMap.get('text');
}

最後にHTML 側にTS のメンバー変数を紐づけます。

HTML

<input id="new-hero" #addText [value]="paramFromQuery" />
<button class="add-button" (click)="addtext(addText.value); addText.value=''">test</button>

※TypeScript 設定でnullable のあたりをいじっちゃったので、少し違うコードに見えるかもですがご容赦くださいm(_ _)m

Comments

[A4UxdAF799hT6WT]

無事できました！
ありがとうございました！