Question

我正在使用ng-bootstrap进行模态，我试图从表中删除记录，我有DeletemodalComponent和EmployeeComponent。

DeletemodlalComponent

import {Component,OnInit, Input} from '@angular/core';
import { NgbModal, ModalDismissReasons, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-deletemodal',
  templateUrl: './deletemodal.html',
  styleUrls: ['./deletemodal.component.css']
})
export class DeletemodalComponent implements OnInit {
  @Input() name;
  closeResult:string; 
  constructor(
    private modalService: NgbModal,
    ) { }

  ngOnInit() {
    //const modalRef = this.modalService.open(DeletemodalComponent);
  }
}

EmployeeComponent

import { Component,Inject, OnInit,AfterViewInit,ViewChild } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Rx';
import { DataTableDirective } from 'angular-datatables';
import { NgbModal, ModalDismissReasons, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { DeletemodalComponent } from 'app/deletemodal/deletemodal.component';
import { EmployeeService } from 'app/services/employee.service';
import { Employee} from "app/services/employee";
@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css'],
})

export class EmployeesComponent implements OnInit {
 @ViewChild(DataTableDirective)
  public datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  employees: Employee[] = [];
  errMesg: any; 
  public emp_data:any;
  closeResult: string;
  public markersData: any;
  name:string;
  id:number;
  modalTitle:string;
  modalRef: NgbModalRef;

  constructor(@Inject(Http)
    private route: ActivatedRoute,
    private router: Router,
    private http:Http,
    private employeeservice:EmployeeService,
    private modalService: NgbModal
    //private modal: NgbModal,
    ) { }

   ngOnInit(): void {
       this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5
    };
    this.getEmployees();
  }

  /* Options for Modal */
  modalOptions : NgbModalOptions = {
    size:'lg'
  };

  getEmployees(){
    this.http.get('http://127.0.0.1:8000/api/employee')
      .map(res => res.json())
      .subscribe(
        employees => {
        this.employees = employees;
        this.dtTrigger.next();
         console.log(employees);
      });
  }
   rerender(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.employees;
    });
  }

delete(id) {
    console.log(id); 
    //delete employee code
  }

  open(content,employee) {
    const modalRef = this.modalService.open(DeletemodalComponent);
    modalRef.componentInstance.id = employee.id;
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

我已导入DeletemodalComponent

中的EmployeeComponent

<button type="button" class="btn btn-primary" (click)="delete(id)">Delete</button>

此行位于deletemodal.html，并在EmployeeComponent中调用删除功能。我认为DeletemodalComponent没有delete()这就是为什么会出现此错误，是否有办法从delete()调用EmployeeComponent的{{1}}模板？

有人可以帮忙吗？

Answer 1

如yurzui所述，请使用@Output。我也会稍稍将delete更改为deleteEmployee。因此，在模态组件中，添加以下内容：

@Output() deleteEmployee = new EventEmitter<number>();

并且点击事件将是您传递ID的地方：

(click)="deleteEmployee.emit(id)"

并在您的父级EmployeeComponent中，在子标记中添加以下内容：

<app-deletemodal (deleteEmployee)="deleteEmployee($event)"></app-deletemodal>

现在在deleteEmployee你有id：

deleteEmployee(id) {
  console.log(id) // id here now in parent comp
}

有关@Output的更多信息以及与 official docs 进行互动的其他方式。

self.context.delete不是angular2

1 个答案: