如何将数据从选定项目传递到角度2中的另一个组件

Question

我很简单： 我有一个名为step1.component.ts的组件，模板有一个ngFor，每个项目都是可选择的简单（selectable是一个指令），所以我需要在名为step2.component.ts的下一个组件中显示所选的项目信息。我经常搜索，但我不知道如何制作它。

step1.component.html

<tr *ngFor="let card of card.cardItem" class="collection-row selectable" selectableSimple>
  <th class="center-align"><img src="{{card.logo}}" alt=""></th>
  <th>{{card.denomination}}</th>
  <th>{{card.idNumber}}</th>
  <th>{{card.arsBalance | currency:'USD':true:'1.2-2'}}</th>
  <th>{{card.usdBalance | currency:'USD':true:'1.2-2'}}</th>
  <th>{{card.dueDate | date}}</th>
</tr>

step1.component.ts

import {Component, Input} from '@angular/core'
import {DummiesService} from '../../services/dummies.service';
import {Card} from '../../models/card.model';
import {ActionCustom} from '../../component/action/actionCustom.component';
import {CollectionCustom} from '../../component/collection/collection.component'

@Component({
  moduleId: module.id,
  templateUrl: 'step1.component.html',
  directives: [ActionCustom],
  providers: [DummiesService, CollectionCustom]
})

export class Step1{
  cards: Card[];

  constructor(protected dummiesService:DummiesService){
    this.cards=dummiesService.getCards();
  }
}

selectableSimple.directive.ts

import { Directive, AfterViewInit } from '@angular/core';
declare var $:any;

@Directive({ 
  selector: '[selectableSimple]' 
})

export class SelectableSimple implements AfterViewInit{

  ngAfterViewInit() {
  $('.collection-row').click(function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
  };

}