Angular 4，将数据从父组件发送到子组件-Java 学习之路

Hellou，有人可以向我解释如何使这项工作正常，因为我在使用viewChild指令方面不是很有经验......

这是交易，我正在研究一个角度小的crud应用程序，并且我的数据有一个填充表，每行我有一个删除按钮，打开一个小的确认窗口，我已设法获得模态（ngx- bootstrap 3）打开点击，现在我必须弄清楚如何从我的父组件调用函数，我的http请求使用我的表上的按钮，但不是当我尝试修改它以打开模态并发出删除请求点击确认按钮......

这是我的父app.component.html小表中的一些代码...

<table style="width:100%" class="table table-striped" 
      id="billing_history_table">
     <thead class="head">
        <tr>
            <th>Name</th>
            <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let e of employeelist>
            <td>{{e.firstName}}</td>
            <td><a (click)="childModal.show()"><span class="glyphicon 
      glyphicon-trash"></span></a></td>
        </tr>
       </tbody>
      </table>

     <app-modal-component #childModal>

     </app-modal-component>

在我的app.component.ts中，这是我的父组件

@ViewChild('childModal') childModal: ModalComponent;

这是我想在我的打开模态中调用的函数，来自父comp .

DeleteEmployee(id: string) {
        this._usermanagementservice.deleteEmployee(id).subscribe(res => {
            this.LoadAllEmployees();
        })
        }

Id来自我的DB，未在表格中显示，我不知道如何将其传递给模态

在我有儿童组件

@ViewChild('childModal') public childModal: ModalDirective;

   show() {
    this.childModal.show();
   }
   hide() {
    this.childModal.hide();
  }

并在子组件.html

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
    role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <p>Do you want to confirm?</p>
            <button type="button" class="btn btn-default" 
    (click)="confirm()">Yes</button>
            <button type="button" class="btn btn-primary" 
    (click)="hide()">No</button>
        </div> 
        </div>
     </div>
   </div>

希望你理解我的问题，在子.html中确认按钮应该触发DeleteEmployee函数并使用我的表中的Id make delete request ...我知道它必须对输出和事件emiters做一些事情，但我不知道，谢谢：（

1 回答

您可以在Angular中使用EventEmitter和Input（）来执行此任务 .

在您的子组件中，声明两个事件 Launcher ，一个用于是单击，另一个用于无单击 . 您可以使用输入将Id传递给子组件 .

@Input() selectedItem:number;
  @Output() yesClicked: EventEmitter<any> = new EventEmitter();
 @Output() noClicked: EventEmitter<any> = new EventEmitter();

单击是时，可以在子组件中调用方法 . 在该方法中，您必须发出已创建的事件 .

confirm(){
    this.yesClicked.emit();
}

hide(){
    this.noClicked.emit();
}

在子组件html中，您必须在childComponent中调用“confirm”方法以获取“是”单击事件并隐藏“否”单击事件的方法 .

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
    role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <p>Do you want to confirm?</p>
            <button type="button" class="btn btn-default" 
    (click)="confirm()">Yes</button>
            <button type="button" class="btn btn-primary" 
    (click)="hide()">No</button>
        </div> 
        </div>
     </div>
   </div>

在父app.component.html中，调用app.component.ts方法，从模板到子组件发出的事件，如下所示 .

<table style="width:100%" class="table table-striped" 
      id="billing_history_table">
     <thead class="head">
        <tr>
            <th>Name</th>
            <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let e of employeelist>
            <td>{{e.firstName}}</td>
            <td><a (click)="clickedItem=e.Id;childModal.show()"><span class="glyphicon 
      glyphicon-trash"></span></a></td>
        </tr>
       </tbody>
      </table>

  <app-modal-component #childModal [selectedItem]="clickedItem"(yesClicked)="DeleteEmployee($event)" (noClicked)="hide()" >

     </app-modal-component>

在app中，component.ts为clickedItem Id声明一个变量，并声明删除和隐藏模型的方法 .

clickedItem:number;

DeleteEmployee(id: string) {
        this._usermanagementservice.deleteEmployee(id).subscribe(res => {
            this.LoadAllEmployees();
        })
        }

回复于 2024-04-20T14:17:27+08:00

Angular 4，将数据从父组件发送到子组件

1 回答

相关问题