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

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);
      }

Page not found

我试过了:

<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);
  }

read property 'stringify' of undefined at Object.eval [as 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 中的所有数据，则使用服务是一种可行的方法。在路由参数中，您应该只传递要反射(reflect)在浏览器 URL 栏中的数据。