Angular 4、从parent发送数据到child组件问题

Question

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

这是交易，我正在 angular 中开发一个小型 crud 应用程序，并用我的数据填充 table，在每一行上我都有一个删除按钮，它会打开一个小确认 window 我已经设法让模态（ngx-bootstrap 3）在点击时打开，现在我必须弄清楚如何从我的 parent 组件调用函数，我的 http 请求工作在我的 table 上有按钮，但当我尝试修改它以打开模式并单击确认按钮发出删除请求时却没有...

这是一些代码，在我的 parent app.component.html small table...

     <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 中，这是我的 parent 组件

    @ViewChild('childModal') childModal: ModalComponent;

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

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

Id 来自我的数据库，table 中没有显示，我不知道如何将它传递给模态

在child组件中我有

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

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

并且在child组件中。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>

希望您理解我的问题，child 中的确认按钮。html 应该触发 DeleteEmployee 函数并使用我的 table 中的 ID 发出删除请求... 我知道它必须对输出和事件发射器做一些事情，但我没有任何线索，谢谢 :(

Answer 1

您可以将 Angular 中的 EventEmitter 和 Input() 用作此任务。

在您的子组件中声明两个事件发射器，一个用于单击，一个用于不单击。您可以使用 Input 将 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" 方法来获取点击事件并隐藏 "No" 点击事件的方法。

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

在应用程序中 component.ts 为 clickedItem Id 声明一个变量并声明删除和隐藏模型的方法。

clickedItem:number;

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

Angular 4、从parent发送数据到child组件问题

Angular 4, sending data from parent to child component issue

angular

modal-dialog

ngx-bootstrap

viewchild