Angular - 使用routerlink将对象传递给@Input参数答案

【问题标题】：Angular - Passing object to @Input parameter with routerlinkAngular - 使用routerlink将对象传递给@Input参数
【发布时间】：2017-12-15 16:18:59
【问题描述】：

我有一个带有@Input 参数的角度组件，如下所示。

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {

  @Input() theRecord: Record = null;

  constructor(private _transmissionHistoryService: TransmissionHistoryService) { }
}

在另一个组件中，我在标记中有这个：

<app-transmission-history [theRecord]="selectedRecord"></app-transmission-history>

完美。一切正常。

我需要将 app-transmission-history 组件移动到独立页面。现在我需要使用 routerLink 访问它，如下所示：

<a routerLink='/transmissionHistory'>{{selectedRecord.Name}}</a>

我不知道如何在标记中的 routerlink 中设置 @Input 参数。我需要设置的值是 selectedRecord，我可以访问它。

我可以对 app-transmission-history 组件进行更改，以另一种方式接收参数。但是，如果我必须根据我们如何实现它来更改实现，它似乎并不灵活。

【问题讨论】：

标签： angular routerlink

【解决方案1】：

转换为json字符串后使用查询参数传递对象。

<a [routerLink]="['/transmissionHistory']"
   [queryParams]="{record:selectedRecord | json }">
    {{selectedRecord.Name}}
</a>

在您的组件中，您可以执行以下操作来读取参数：

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = JSON.parse(params.record) as Record;
      });
   }
}

路由器配置如下所示：

{ path: 'transmissionHistory', component: TransmissionHistoryComponent }

【讨论】：

在 Angular 8 中，我必须使用 queryParamMap 才能使其工作。

【解决方案2】：

请查看router parameters。您可以像这样传递参数：

<a [routerLink]="['/transmissionHistory', selectedRecord]">{{selectedRecord.Name}}</a>

在您的组件中，您可以像这样检索它：

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = params['record'];
      });
   }
}

记得在你的路由器配置中设置这个参数：

{ path: 'transmissionHistory/:record', component: TransmissionHistoryComponent }

【讨论】：

这改变了我的实现。该组件在其他地方使用 @Input 参数。我是否必须根据他们到达这里的方式来支持两者？
我想你可以，但我自己从未尝试过。试试吧！
据我所知，没有办法将@Input 参数作为路由的一部分传递。 @Input仅用于父组件和子组件之间的通信。路由到组件不会建立父/子关系。
不适合我。我看不出这对对象有什么作用……你能详细说明一下吗？
这是用于传递路径参数以传递我们需要查询参数的对象

【解决方案3】：

How to pass data between routed components in Angular

【讨论】：