web-dev-qa-db-fra.com

Angular - Passer un objet au paramètre @Input avec routerlink

J'ai un composant angular avec un paramètre @Input comme suit.

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

  @Input() theRecord: Record = null;

  constructor(private _transmissionHistoryService: TransmissionHistoryService) { }
}

Dans un autre composant, j'ai ceci dans le balisage:

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

Parfait. Tout fonctionne comme prévu.

Je dois déplacer le composant app-transmission-history vers une page autonome. Maintenant, je dois y accéder avec routerLink comme suit:

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

Je ne peux pas comprendre comment définir le paramètre @Input dans le routerlink dans le balisage. La valeur à laquelle je dois la définir est selectedRecord, à laquelle j'ai accès.

Je pourrais apporter des modifications au composant app-transmission-history pour recevoir le paramètre d'une autre manière. Cependant, cela ne semble pas flexible si je dois changer la mise en œuvre en fonction de la façon dont nous y arrivons.

angularrouterlink
6
Don Chambers

Utilisez le paramètre de requête pour passer l'objet après la conversion en chaîne json.

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

Dans votre composant, vous pouvez faire quelque chose comme ça pour lire les paramètres:

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

Et la configuration du routeur ressemblera à ceci:

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

Veuillez consulter paramètres du routeur . Vous pouvez passer votre param comme ceci:

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

Que dans votre composant, vous pouvez le faire revivre comme ceci:

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

N'oubliez pas de configurer ce paramètre dans la configuration de votre routeur:

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