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

Question

我有一个带有@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组件以另一种方式接收参数。但是，如果我必须根据实现方式来更改实现，这似乎并不灵活。

Answer 1

请看一下路由器参数。你可以像这样传递你的参数：

<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 2

Use query parameter to pass object after converting to json string.

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

In your component you can do something like this to read params:

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

And router config will look like as:

{ path: 'transmissionHistory', component: TransmissionHistoryComponent }