Question

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

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

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

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

完美。一切都按预期工作。

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

{{1}}

我无法弄清楚如何在标记中的routerlink中设置@Input参数。我需要设置它的值是selectedRecord，我可以访问它。

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

Answer 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 }

Answer 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 }

Answer 3

How to pass data between routed components in Angular

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

3 个答案: