web-dev-qa-db-ja.com

Angular-routerlinkでオブジェクトを@Inputパラメータに渡す

angularコンポーネントがあり、@ 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コンポーネントを変更して、別の方法でパラメーターを受け取ることができます。しかし、それを実現する方法に基づいて実装を変更する必要がある場合、柔軟性に欠けます。

angularrouterlink
6
Don Chambers

Json文字列に変換した後、クエリパラメータを使用してオブジェクトを渡します。

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

コンポーネントでは、次のようにして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;
      });
   }
}

そしてルーターの設定は次のようになります：

{ path: 'transmissionHistory', component: TransmissionHistoryComponent }
6
Babar Siddiqui

ルーターパラメータ をご覧ください。次のようにパラメータを渡すことができます：

<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 }
3
Baumi