使用路由将对象从一个组件传递到另一个组件

Question

我正在 Angular 6 中开发一个 Web 应用程序，并且在一个页面中有一个新闻列表。我有一个名为“查看详细信息”的按钮，我想将用户带到另一个页面（组件）以显示所有信息。

    // Object to pass
    News {
      title: string;
      date: Date;
      body: string;
    }

    // Routing
    {path: 'news-details/:data', component: NewsDetailsComponent},

    <ng-container *ngFor="let data of newsFromToday; index as i">
         <button type="button" [routerLink]="['/news-details', data]">See details</button>
    </ng-container>

在我想要接收数据的组件中：

constructor(private route: ActivatedRoute) { }

      ngOnInit() {
        const data = this.route.snapshot.paramMap.get('data');
        console.log(data);
      }

找不到网页

我努力了：

<button type="button" routerLink="/news-details/{{JSON.stringify(data)}}">See details</button>

ngOnInit() {
    const competitionData = JSON.parse(this.route.snapshot.paramMap.get('data'));
    console.log(competitionData);
  }

读取 Object.eval 中未定义的属性“stringify”[作为 updateDirectives]

我的目标是接收变量中的对象以显示模板中的所有信息。

Answer 1

ActiveRoute 的解决方案（如果您想通过路由传递对象 - 使用 JSON.stringfy/JSON.parse）：

// Routing
{path: 'news-details', component: NewsDetailsComponent}


<ng-container *ngFor="let data of newsFromToday; index as i">
     <button type="button" (click)="showNewsDetails(data)">See details</button>
</ng-container>

发送前准备对象：

constructor( private router : Router) { }

showNewsDetails(data) {

  let navigationExtras: NavigationExtras = {
    queryParams: {
        "data": JSON.stringify(data)
    }
  };

  this.router.navigate(["news-details"],  navigationExtras);
}

在目标组件中接收您的对象：

 constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

  this.route.queryParams.subscribe(params => {
     const data = = JSON.parse(params["data"]);
  });
}

请注意，如果您不想公开 URL 中的所有数据，则可以使用服务。在路由参数中，您应该只传递您想要在浏览器 URL 栏中反映的数据。