Angular 4, отправка данных от родительского к дочернему компоненту

Привет, может кто-нибудь объяснить мне, как заставить эту работу работать должным образом, потому что я не очень опытен в использовании директив viewChild ...

Вот в чем дело, я работаю над небольшим приложением crud в angular, и у меня есть заполненная таблица с моими данными, в каждой строке у меня есть кнопка удаления, которая открывает небольшое окно подтверждения, которое мне удалось получить модально (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;

Это функция, которую я хочу вызвать в моем открытом модальном окне из родительской композиции.

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

Идентификатор взят из моей БД, не показан в таблице, я не знаю, как передать его в модальный

В дочернем компоненте у меня есть

  @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 и с помощью идентификатора из моей таблицы делать запрос на удаление ... Я знаю, что он должен что-то делать с эмиттерами вывода и событий, но я понятия не имею, Благодарность :(


angular modal-dialog ngx-bootstrap viewchild
person codemonkey00016    schedule 04.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать как EventEmitter и Input () в Angular для этой задачи.

В дочернем компоненте объявите два эмиттера событий: один для «да», а второй - для «нет». Вы можете использовать Input для передачи идентификатора дочернему компоненту.

 @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 для события щелчка «да» и метод скрытия для события щелчка «Нет».

  <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 и объявите методы для удаления и скрытия модели.

clickedItem:number;

 DeleteEmployee(id: string) {
        this._usermanagementservice.deleteEmployee(id).subscribe(res => {
            this.LoadAllEmployees();
        })
        }
person Ishara Sandun    schedule 05.03.2018
comment
Это не работает, когда я нажимаю для подтверждения, ничего не происходит: / Я не уверен, что понимаю, что вы имеете в виду под объявлением методов для удаления и скрытия модели? - person codemonkey00016; 05.03.2018
comment
Пришлось изменить этот аргумент, спасибо Ishara (yesClicked) = DeleteEmployee (clickedItem) - person codemonkey00016; 05.03.2018
comment
Извините, я сделал здесь ошибку. Вы должны передать идентификатор, как показано ниже, в дочернем компоненте, чтобы вернуть его из $ event confirm () {this.yesClicked.emit (selectedItem); } То, что вы здесь сделали, тоже правильно :) - person Ishara Sandun; 05.03.2018