Angular 角度8：未使用routerLink和state以所需格式获取状态值

我用的是角度8

当路由到子组件时，我使用以下代码传递数据

<a routerLink="./publishedbook" state="{ id:1 , name:'Two States'}">Two States</a>

控制台显示

{0: "{", 1: " ", 2: "i", 3: "d", 4: ":", 5: "1", 6: " ", 7: ",", 8: " ", 9: "n", 10: "a", 11: "m", 12: "e", 13: ":", 14: "'", 15: "T", 16: "w", 17: "o", 18: " ", 19: "S", 20: "t", 21: "a", 22: "t", 23: "e", 24: "s", 25: "'", 26: "}", navigationId: 3}
{0: "{", 1: " ", 2: "i", 3: "d", 4: ":", 5: "1", 6: " ", 7: ",", 8: " ", 9: "n", 10: "a", 11: "m", 12: "e", 13: ":", 14: "'", 15: "T", 16: "w", 17: "o", 18: " ", 19: "S", 20: "t", 21: "a", 22: "t", 23: "e", 24: "s", 25: "'", 26: "}", navigationId: 3}

如何以json格式获取值，如

{ id:1 , name:'Two States' }

或者在属性为->id和名称的对象中具有相应的值。

确保使用属性绑定发送状态：

确保使用属性绑定发送状态：

您需要将
状态
属性括在括号中（输入属性绑定）

您需要将
状态
属性括在括号中（输入属性绑定）

为了通过锚定标记将数据传递给子组件，数据必须包含在URL或父组件和子组件都可以访问的服务中。为了通过锚定标记将数据传递给子组件，数据必须包含在URL或父组件和子组件都可以访问的服务中。
{ id:1 , name:'Two States' }

export class HelloComponent implements OnInit  {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap
      .pipe(map(() => window.history.state))
      .subscribe(data => {
        console.log('data', data);
        this.data = data;
    });
  }
}


<a routerLink="./publishedbook" [state]="{ id:1 , name:'Two States'}">Two States</a>

constructor(public activatedRoute: ActivatedRoute) {}

ngOnInit() {
    this.activatedRoute.paramMap.subscribe(()=> {
      console.log(window.history.state)
    }
}