Angular 角度2将变量从一个模板转移到另一个模板

我有个问题，我能把一个变量从一个模板转移到另一个模板吗？我尝试通过（单击）=“selectedItem=Revolution”删除项目，但Revolution是我在Revolution列表视图中的变量，所以模式删除视图中的按钮未定义消息。我能修一下吗？我想从模式模板中删除改建列表视图项。下面是我的代码：

expndtw-list-view.component.html：

<table class="table table-striped" [mfData]="renovations" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 20%">
            <mfDefaultSorter by="id">Id</mfDefaultSorter>
        </th>
        <th style="width: 50%">
            <mfDefaultSorter by="name">Nazwa</mfDefaultSorter>
        </th>
        <th style="width: 10%">
            <mfDefaultSorter by="zipCode">Kod pocztowy</mfDefaultSorter>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let renovation of mf.data">
        <td>{{renovation.id}}</td>
        <td>
          <a [routerLink]="['/renovations', renovation.id]">
          {{renovation.name}}
          </a>
        </td>
        <td class="text-right">{{renovation.zipCode}}</td>
         <td>
            <button class="btn btn-info" data-toggle="modal" data-target="#editForm" (click)="selectedItem = renovation">Edytuj</button>
            <button button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal"
            (click)="selectedItem = renovation">Usuń</button>
          </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table> 


  <app-modal-delete></app-modal-delete>

<div class="container">

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Usuwanie remontu</h4>
        </div>
        <div class="modal-body">
          <p>Czy na pewno chcesz usunąć pozycję?</p>
          <button class="btn btn-default"
                  data-dismiss="modal"
                  (click)="deleteRenovation()">TAK</button>
          <button class="btn btn-default" data-dismiss="modal">NIE</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

modal-delete.component.html：

<table class="table table-striped" [mfData]="renovations" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 20%">
            <mfDefaultSorter by="id">Id</mfDefaultSorter>
        </th>
        <th style="width: 50%">
            <mfDefaultSorter by="name">Nazwa</mfDefaultSorter>
        </th>
        <th style="width: 10%">
            <mfDefaultSorter by="zipCode">Kod pocztowy</mfDefaultSorter>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let renovation of mf.data">
        <td>{{renovation.id}}</td>
        <td>
          <a [routerLink]="['/renovations', renovation.id]">
          {{renovation.name}}
          </a>
        </td>
        <td class="text-right">{{renovation.zipCode}}</td>
         <td>
            <button class="btn btn-info" data-toggle="modal" data-target="#editForm" (click)="selectedItem = renovation">Edytuj</button>
            <button button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal"
            (click)="selectedItem = renovation">Usuń</button>
          </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table> 


  <app-modal-delete></app-modal-delete>

<div class="container">

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Usuwanie remontu</h4>
        </div>
        <div class="modal-body">
          <p>Czy na pewno chcesz usunąć pozycję?</p>
          <button class="btn btn-default"
                  data-dismiss="modal"
                  (click)="deleteRenovation()">TAK</button>
          <button class="btn btn-default" data-dismiss="modal">NIE</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

&时代；
乌苏瓦尼雷蒙图
Czy na pewno chcesz usunąćpozycję

德
聂
接近

---

谢谢大家的帮助。

您可以使用

Input

decorator以Angular2的形式将数据从一个组件传递到另一个组件。请尝试下面的代码

在

改造列表视图.component.html

中，添加变量

itemtodele

以存储selectedItem的值

<app-modal-delete [itemToDelete]="selectedItem" ></app-modal-delete>

---

现在

this.itemtodele

将引用从翻新列表视图.component中选择的项目。

您可以使用

Input

decorator在Angular2中将数据从一个组件传递到另一个组件。请尝试下面的代码

在

改造列表视图.component.html

中，添加变量

itemtodele

以存储selectedItem的值

<app-modal-delete [itemToDelete]="selectedItem" ></app-modal-delete>

现在

this.itemtodelet

将引用REVONICE-list-view.component中的选定项目