angular - 如何在变量中应用'"'？

问题描述

目标：
使用包含数据的变量 b 以显示屏幕消息“Got the JWT as: 123”

问题：
为了减少硬编码和应用变量，我无法检索请求的结果。

如何在变量 b 的 a 中应用符号 '"'？

信息：
Stackblitz：https ://stackblitz.com/edit/angular-navigate-with-query-params-x17ard?file=src/app/app.component.ts

谢谢

import { Component } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private router: Router) {}

  /** 
  navigate() {
    this.router.navigate(["authenticate"], { queryParams: { jwt: "123" } });
  }

  */

  navigate() {
    let a = "authenticate";
    let b = "jwt: 123";

    this.router.navigate([a], { queryParams: { b } });
  }
}

<a [routerLink]="['/authenticate']" [queryParams]="{ jwt: '123'}">Authenticate</a> | <a routerLink="/home">Home</a> | 

<button (click)="navigate()">Navigate to Authenticate</button>

<router-outlet></router-outlet>

标签： angular

b将需要定义如下，您需要"围绕key以及value.

let b = '"jwt": "123"';

然后你将不得不扩展你的逻辑authentication.component.ts来处理这两种格式，你的模板路由是一个标准，你的b变量是另一个。

需要注意的是，在路由中使用变量 b 会创建一个对象，并将b其用作键值对的键。

您将需要通过访问它params.b来检索字符串文字，然后构造回一个JSON Object点符号。

this.route.queryParams.subscribe(params => {
   console.log("normal params: ", params);
   let _jwt;
   if (params.b) {
     console.log("params.b: ", params.b);
     // add encapsulating {} to parse into JSON Object
     const jObj = JSON.parse("{" + params.b + "}");
     console.log("jObj: ", jObj);
     _jwt = jObj.jwt;
   } else {
     _jwt = params.jwt;
   }
   this.jwt = _jwt;
 });

堆栈闪电战

https://stackblitz.com/edit/angular-navigate-with-query-params-yr1fg2?file=src/app/authentication/authentication.component.ts

angular - 如何在变量中应用'"'？

问题描述

解决方案

推荐阅读