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'[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中的所有数据，则可以使用服务。在路径参数中，您只应传递要在浏览器URL栏中反映的数据。

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

1 个答案: