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

Question

我有疑问，我可以将一个变量从模板转移到另一个吗？我尝试通过 (click)="selectedItem = renovation" 删除项目，但 renovation 是我在 renovation-list-view 中的变量，因此 modal-delete view 中的按钮未定义消息。我可以修好吗？我想从模态模板中删除 renovation-list-view 项目。下面是我的代码：

翻新列表-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>

翻新列表-view.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';

import {IRenovationList} from './renovation-list';
import {Renovation} from './renovation';



import {RenovationService} from '../service/renovation.service';




@Component({
  templateUrl: './renovation-list-view.component.html',
  styleUrls: ['./renovation-list-view.component.css'],


})
export class RenovationListView implements OnInit {
  title = 'Menu Główne';
  renovations: IRenovationList[] = [];


  errorMessage: string;

  selectedItem: any;

newItem: Renovation = new Renovation();
renovation: Renovation = new Renovation();


  constructor(private _renovationService: RenovationService){}



  addRenovation(): void {


    var copy = Object.assign({}, this.newItem)
      this._renovationService.addRenovation(copy)
      .subscribe(()=> this.renovations.push(copy));
      this.reset();


  }

  reset(): void {
    this.newItem.id = null;
    this.newItem.name = null;
    this.newItem.zipCode = null;
  }


  editRenovation(): void {
    this.renovation = this.renovations[this.selectedItem.id - 1];
    this._renovationService.editRenovation(this.renovation)
      .subscribe(()=> this.renovations[this.selectedItem.id - 1]);

      console.log(this.selectedItem.id);
  }


  ngOnInit(): void {
    this._renovationService.getRenovations()
          .subscribe(renovations => {
            this.renovations = renovations;
          },
          error => this.errorMessage = <any>error);
  }


}

modal.delete.component.ts:

import { Component, OnInit } from '@angular/core';
import {IRenovationList} from '../renovation-list/renovation-list';
import {Renovation} from '../renovation-list/renovation';
import {RenovationListView} from '../renovation-list/renovation-list-view.component';
import {RenovationService} from '../service/renovation.service';


@Component({
  selector: 'app-modal-delete',
  templateUrl: './modal-delete.component.html',
  styleUrls: ['./modal-delete.component.css']
})
export class ModalDeleteComponent implements OnInit {

    selectedItem: any;
    renovations: IRenovationList[] = [];


  constructor(private _renovationService: RenovationService){}


  deleteRenovation(): void {
    console.log(this.selectedItem);
      this._renovationService.deleteRenovation(this.selectedItem.id)
      .subscribe(()=> this.renovations = this.renovations.filter( item => this.selectedItem !== item) );
  }

  ngOnInit() {
  } 

}

模态-delete.component.html:

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

谢谢大家的帮助。

Answer 1

您可以使用 Input decorator.Pls 在 Angular2 中将数据从一个组件传递到另一个组件 decorator.Pls 试试下面的代码。

在您的 renovation-list-view.component.html 中，添加一个变量 itemToDelete 来存储 selectedItem 的值。

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

在您的 modal.delete.component.ts 中，导入 Input 装饰器以获取 itemToDelete 的值。

import { Component, Input } from '@angular/core';

export class ModalDeleteComponent {
  @Input() itemToDelete: any;
}

现在 this.itemToDelete 将引用从装修列表中选择的项目-view.component。

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

Angular 2 transfer variable from one template to another

bootstrap-modal

angular2-template

angular