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

RRGT19 发表于 Dev

RRGT19

我正在 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 [as updateDirectives] 中读取未定义的属性“stringify”

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

巴塞尔伊斯梅尔

使用 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 栏中的数据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。